如果表单字段有效，如何仅更改按钮 CSS

Question

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

我需要什么：

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

现在按钮正在更改，即使字段说明“此字段为必填项”且表单尚未提交。

这里是my site的demo，点击按钮看看。

我知道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??";
  });
});

如何让飞机仅在在验证/提交后 _ 延迟 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 Validate js 文件，因此在调用 .validate() 方法时失败。
• 此外，您的演示缺少 });，这会产生 Unexpected End of Input 错误。

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