2

我有一个用 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");
 });
4

2 回答 2

1

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

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

或者你可以只使用type="button"而不是type="submit".

于 2013-09-09T08:18:26.447 回答
0

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

如果您使用新的 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");
   });
 });

如果没有，请尝试聚焦并模糊每个字段，以告诉验证器这些字段是可以的，

请参阅如何在“setCustomValidity("...");”之后清除、删除或重置 HTML5 表单验证状态？

如果你使用jQUery 验证插件，你需要做一个resetForm()

于 2013-09-09T08:23:12.470 回答