在通過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/