在通过Ajax请求提交之前使用jQuery进行表单验证

Question

我想在使用Ajax请求将表单提交到我的php脚本之前验证我的表单。我已经通过stackoverflow看，并没有发现有用的东西。我仍然对jQuery感到陌生，对我如此光秃秃的。

我有3个输入和一个提交按钮：

<input type="text" name="full-name" id="full-name" value="" placeholder="Full Name" /> 
<input type="text" name="email" id="email" value="" placeholder="Email" /> 
<textarea name="message" id="message" value="" rows="8" placeholder="Message"></textarea> 
<input type="submit" id="contact-submit" class="contact-submit" value="Submit"> 
<div id="messageResponse" class="center" style="display:none;"></div> 

$(document).ready(function() { 

    function validator(){ 
     return $('form').validate(); 
    } 

    $('form').on('submit', function(e) { 
     e.preventDefault(); 

     $.ajax({ 
      dataType: 'html', 
      type: 'post', 
      url: 'mail.php', 
      data: $('#contact-form').serialize(), 
      beforeSubmit: validator, 
      success: function(responseData) { 
       $('#contact-submit').remove(); 
       $('#messageResponse').fadeIn(1000); 
       $('#messageResponse').html(responseData); 
      }, 
      error: function(responseData){ 
       console.log('Ajax request not recieved!'); 
      } 
     }); 

     // resets fields 
     $('input#full-name').val(""); 
     $('input#email').val(""); 
     $('textarea#message').val(""); 
    }) 
}); 

我应该使用这个插件？我所需要的是用红色边框颜色验证的名称，电子邮件和消息。这让我非常头疼，明天我会与客户会面，最终确定网站。如果我找不到工作解决方案，我不会问问题。

我试图用这个也：jQuery Form Validator Plugin

Answer 1

beforeSubmit是malsup给ajaxForm插件，而不是jQuery的AJAX的一个选项。仅当validator（）返回true时才执行ajax。

$('form').on('submit', function(e) { 
    e.preventDefault(); 
    if (validator()){ 
     $.ajax({...}); 
    } 
}); 

旁白：

而不是使用多行要求的jQuery选择一次，你可以用链更加同样的事情。

$('#messageResponse').fadeIn(1000).html(responseData); 

同样，做同样的事情的几个要素

$('#full-name, #email, #message').val(""); 

Answer 2

是您$('form').validate()指jQuery Validate plugin？

如果是这样，也绝对在使用submit处理程序时，jQuery验证插件已经有提交建在事件处理的回调函数是没有意义的，而这正是你在哪里应该把你的阿贾克斯。

As per the documentation for the Validate plugin，该submitHandler回调函数是：

“回调处理实际当表单有效提交获取 形式作为唯一的参数替换默认提交右 。验证后，通过Ajax提交表单。“

试试这个代码，假设你ajax功能是正确的：

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // your rules and options, 
     submitHandler: function (form) { 
      $.ajax({ 
       dataType: 'html', 
       type: 'post', 
       url: 'mail.php', 
       data: $(form).serialize(), 
       success: function (responseData) { 
        $('#contact-submit').remove(); 
        $('#messageResponse').fadeIn(1000); 
        $('#messageResponse').html(responseData); 
       }, 
       error: function (responseData) { 
        console.log('Ajax request not recieved!'); 
       } 
      }); 
      // resets fields 
      $('input#full-name').val(""); 
      $('input#email').val(""); 
      $('textarea#message').val(""); 

      return false; // blocks redirect after submission via ajax 
     } 
    }); 

}); 

DEMO：http://jsfiddle.net/kUX2N/