如何使按钮 CSS 仅在表单字段有效时更改

Question

目前我的站点只有一个表单和一个按钮。该按钮包含一个纸飞机 svg 和一些 javascript，当按下按钮时飞机会飞走。

我需要的是：

仅起飞的飞机（CSS 更改）如果上面的表单字段有效（姓名、电子邮件、消息）。
在提交表单之前添加 1 秒延迟。

现在即使字段显示 "this field is required" 并且表单尚未提交，按钮也会发生变化。

这里有一个演示my site点击按钮看看

我知道 p 标签不应该在 button 标签内，但是按钮中的文本不会改变（飞机不会飞）除非 p 出于某种原因使用了标签。如果我删除 'p' 从index.js$('button p').text(function(i, text)的这条线看不到飞机飞走了

HTML:

<form method="post" action="submit.php" class="signin"> 

     <input name="name" id="name" type="text" class="feedback-input" placeholder="Your Name" />   
    <input name="email" id="email" type="text" class="feedback-input" placeholder="Your Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)"/>
   <textarea name="message" id="message" class="feedback-input" placeholder="Your Comment or Question" required></textarea>


 <button>

 <p>CLICK HERE</p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
  </svg>
</button>

  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>

  <script src="js/index.js"></script>


  </form>

和index.js是：

$('button').click(function() {
  $(this).toggleClass('clicked');
  $('button p').text(function(i, text) {
    return text === "Why sent??" ? "Why Sent??" : "Why Sent??";
  });
});

如何让飞机仅在validation/submission后起飞_ 1秒延迟？谢谢你

Answer 1

我建议您使用 JS 验证库作为 HTML5 验证的后备（jQuery Validation 非常简洁）。

无论哪种方式，监听表单上的提交事件（如果使用 $.validation 使用 submitHandler 配置键）。

$('form#youId').on('submit', function(e){
    e.preventDefault();
    setTimeout(function(){
        // your fliying animation
        // when your flying animation ENDS
        e.target.submit(); // this SENDS the actual form.
    }, 1000);
});

编辑

看到这个 Working Example。

关于您的演示的评论

您的演示没有包含 jQuery 验证 js 文件，因此 .validate() 方法调用失败。
此外，您的演示缺少 });，导致 Unexpected End of Input 错误。

新演示使用自定义事件在动画结束后触发表单提交（实际上是在触发后 1 秒后）。

如何使按钮 CSS 仅在表单字段有效时更改

How to make a button CSS change only IF form fields are valid

html

javascript

css

forms

button

编辑