表单验证成功

Question

当我在未填写任何信息的情况下提交表单时，它会迅速显示错误消息，然后消失。如果没有错误消息并且验证成功，我只希望表单褪色。我想我可能需要使用if语句来获得成功，或者需要使用一个提交处理程序？

到目前为止，我有这个 - https://jsfiddle.net/wnmLmcm8/

$(document).ready(function() { 

    $("form").submit(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: this.method, 
     url: this.action, 
     data: { 
     name: $('#name').val(), 
     email: $('#email').val() 
     }, 
     success: function() { 
     $('#emailform').fadeOut("slow"); 
     } 
    }); 
    }); 

    $("form").validate({ 
    rules: { 
     email: { 
     required: true, 
     email: true, 
     remote: "http://localhost:3000/inputValidator" 
     } 
    } 
    }); 
}); 

Answer 1

这是你的jsfiddle的工作版本：https://jsfiddle.net/ywhpdLen/3/

这个片段的作品，基于把你的jsfiddle，但你的jsfiddle不起作用。我必须将代码放到我自己的开发环境中，在本地。

弹出窗口会一直保留到您在文本框中单击。

使用默认的“.validate（）”扩展名为输入元素&添加“必需”来完成作业。如果你正在寻找定制它，我会强烈建议看https://jqueryvalidation.org/documentation/

<div id="emailform"> 
    <form method="post" action="form.php"> 
     <hr> 
     <label for="name">Name</label> 
     <br> 
     <input type="text" name="name" id="name" class="NewsLetter1" required/> 
     <br> 
     <label for="email">Email</label> 
     <br> 
     <input type="text" name="email" id="email" class="NewsLetter2" required/> 
     <input type="submit" value="Submit"> 
     <hr> 
    </form> 
</div> 

<script> 
    $(document).ready(function() { 

     $("form").submit(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       type: this.method, 
       url: this.action, 
       data: { 
        name: $('#name').val(), 
        email: $('#email').val() 
       }, 
       success: function() { 
        $('#emailform').fadeOut("slow"); 
       }, 
       failure: function (ex) { 

       } 
      }); 
     }); 

     $("form").validate(); 
    }); 

</script> 

每注释，如下：它看起来像你的Ajax调用仍然发生和form.submit（）被发射了。您可能想要移除您的form.submit（）调用，并将其包含在验证调用中，如此。

$("form").validate({ 
    submitHandler:function(form){ 

      $.ajax({....}) 
    } 

    }); 

Answer 2

做它提交处理像...

$(document).ready(function() 
{ 
    $("form#sub_form").validate({ 
     rules: { 
      UserName: "required", 
      Useremail: { 
       required: true, 
       email: true 
      }, 
      Userpwd:{ 
       required: true, 
       minlength:8 
      }, 
      Con_Userpwd:{ 
       required:true, 
       equalTo:"#reg-pass" 
      }, 
      contact:{ 
       required:true, 
       minlength:10 
      } 
     }, 
     messages: { 
      UserName: "Please specify your name", 
      Useremail: { 
       required: "We need your email address to contact you", 
       email: "Your email address must be in the format of name@domain.com" 
      }, 
      Userpwd:{ 
       required: "Enter Your Password", 
       minlength:"Please Enter minimum 8 digit password" 
      }, 
      Con_Userpwd: { 
       required:"Please re-enter your password", 
       equalTo:"Password not matched" 
      }, 
      contact:{ 
       required:"Phone Number Required", 
       minlength:"Minimum 10 Digits Required" 
      } 
     }, 
     submitHandler: function(form) { 
      var msg = $("form#sub_form").serialize(); 
     $.ajax({ 
        type: "POST", 
        url: "register_checkout.php", 
        data: msg, 
        success: function (html) { 
                   $(".popup").delay(5000).fadeOut(1500); 
          setTimeout(function(){window.location='one-page-checkout.php'},3000); 
          //return false; 
         } 
         else 
         { 
          $("#reg_message").slideUp(); 
          $("#reg_message").slideDown().html(html); 

         } 
        } 
       } 
      ); 

Answer 3

尝试把你的Ajax到验证插件的submitHandler

$("form").validate({ 
    rules: { 
     email: { 
     required: true, 
     email: true, 
     remote: "http://localhost:3000/inputValidator" 
     } 
    }, 
    submitHandler:function(form){ 

      $.ajax({....}) 
    } 

    }); 

当遇到了问题用debug:true

Answer 4

为即时解决方案使用“必需”https://jsfiddle.net/et7qcrye/

<input type="text" name="name" id="name" class="NewsLetter1" required/>