我想在使用Ajax請求將表單提交到我的php腳本之前驗證我的表單。我已經通過stackoverflow看,並沒有發現有用的東西。我仍然對jQuery感到陌生,對我如此光禿禿的。在通過Ajax請求提交之前使用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
僅供參考,您可以鏈接的東西'$( '#messageResponse')淡入(1000 ).html(responseData);' – Popnoodles 2013-03-03 02:44:12
感謝您的提示! – fryvisuals 2013-03-03 02:56:10
使用jQuery Validate插件時,您的'ajax'函數進入內置的'submitHandler'回調函數,該回調函數僅在有效表單上觸發。請參閱:http://docs.jquery.com/Plugins/Validation/validate#toptions – Sparky 2013-03-03 06:00:00