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>

JQUERY：

 $('#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");
   });
 });

如果没有，请尝试对焦并模糊每个字段以告知验证者字段正常，</ p>

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

如果您使用jQUery validation plugin，则需要执行resetForm()

使用AJAX提交表单后如何重置验证？

2 个答案: