Question

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

我需要什么：

飞机飞行（CSS改变）仅 IF 上面的表单字段有效（名称，电子邮件，消息）。
在提交表单前添加1秒延迟。

现在按钮正在改变，即使字段说明“此字段是必需的”并且表单尚未提交。

以下是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??";
  });
});

如何使飞机仅在验证/提交后_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秒过后）。

如何使CSS按钮只更改IF表单字段有效

1 个答案:

修改