使用 AJAX 提交表单后如何重置验证？ [复制]

Question

我有一个用 html5 验证验证的表单，然后用 AJAX 提交，然后输入字段被重置，它正在工作。

我的问题是，在有效提交后，发送了消息，清除了输入，但 html5 验证仍然将我的空字段概述为不正确的字段。

HTML：

 <form method="post" action="mailer.php" class="contact-form" id="cform">
     <input type="text" name="name" placeholder="Name" required />
     <input type="text" name="phone"  placeholder="Phone" required />                       
     <input type="email" name="email" placeholder="Email" required />                       
     <textarea name="message" placeholder="Message" required></textarea>
     <input type="submit" class="submit-btn" id="submit-btn" value="Send your message" />
     <div id="success"></div>
 </form>

查询：

 $('#submit-btn').click(function(){
     if($("#cform")[0].checkValidity()) {

         $.post("mailer.php", $("#cform").serialize(),  function(response) {
             $('#success').html(response);
             $("#cform")[0].reset();
         });
         return false;

     } else console.log("invalid form");
 });

Answer 1

您需要停止默认的提交行为。

 $('#submit-btn').click(function(e){
     e.preventDefault();
     // ...
 }

或者您可以只使用type="button" 而不是type="submit"。

Answer 2

我强烈建议你使用提交事件

如果您使用新的 HTML5 验证（例如需要），您的 .reset() 应该可以工作。

它适用于我Live Demo

$(function() {
  $('#cform').on("submit",function(e){
    e.preventDefault();  
    if($("#cform")[0].checkValidity()) {
      $.post("/echo/json/", $("#cform").serialize(),function(response) {
        $('#success').html(response);
        $("#cform")[0].reset();
      });
     }
     else window.console &&  console.log("invalid form");
   });
 });    

如果没有，请尝试聚焦并模糊每个字段，以告诉验证器字段正常，

见How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?

如果你使用jQUery validation plugin，你需要做一个resetForm()