1
希望你做得很好。jquery驗證插件SubmitHandler Ajax只能工作一次
所以我正在做一個註冊表單（對於管理員），使用jquery驗證插件和ajax調用來處理數據插入。這是我的表格：
<form id="add_user" class="form-horizontal" action="includes/process_adduser.php" role="form" method="post">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
Your form validation is successful!
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="musername">Username<span class="required">* </span></label>
<div class="col-md-3">
<input type="text" id="musername" name="musername" class="form-control" placeholder="Enter username">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mpassword">Password<span class="required"> * </span></label>
<div class="col-md-3">
<input type="password" id="mpassword" name="mpassword" class="form-control" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="memail">Email <span class="required">* </span></label>
<div class="col-md-3">
<input type="email" id="memail" name="memail" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mname">Full name<span class="required">* </span></label>
<div class="col-md-3">
<input type="text" id="mname" name="mname" class="form-control" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mtype">User type<span class="required">* </span></label>
<div class="col-md-3">
<select id="mtype" name="mtype" class="form-control">
<option value="editor">Editor</option>
<option value="ad-admin">Ad-admin</option>
<option value="administrator">Administrator</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Access <span class="required">* </span>
</label>
<div class="col-md-4">
<div class="checkbox-list" data-error-container="#add_user_access_error">
<label>
<input type="checkbox" value="AA" class="access" name="access[]"/> AA </label>
<input type="checkbox" value="BA" class="access" name="access[]"/> BA </label>
</div>
<div id="add_user_access_error"></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green submit">Submit</button>
<button type="button" class="btn default">Cancel</button>
</div>
</div>
</div>
</form>
，而我的驗證腳本：
<script>
jQuery(document).ready(function() {
$('.submit').click(function(){
console.log("submiiiiit");
var form1 = $('#add_user');
var error1 = $('.alert-danger', form1);
var success1 = $('.alert-success', form1);
$('#add_user').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
musername: {
required: true
},
mpassword: {
required: true
},
memail: {
required: true
},
mname: {
required: true
},
usertype: {
required: false
},
'access[]': {
required: true,
minlength: 1
}
},
messages: {
musername: {
required: "Username is required."
},
mpassword: {
required: "Password is required."
},
memail: {
required: "Email is required."
},
mname: {
required: "Name is required."
},
'access[]': {
required: "Access is required.",
minlength: "Access is required."
}
},
invalidHandler: function(event, validator) { //display error alert on form submit
success1.hide();
$('.alert-danger span').text("You have some form errors. Please check below....");
$('.alert-danger', $('#add_user')).show();
Metronic.scrollTo(error1, -200);
},
errorPlacement: function (error, element) { // render error placement for each input type
if (element.parent(".input-group").size() > 0) {
error.insertAfter(element.parent(".input-group"));
} else if (element.attr("data-error-container")) {
error.appendTo(element.attr("data-error-container"));
} else if (element.parents('.radio-list').size() > 0) {
error.appendTo(element.parents('.radio-list').attr("data-error-container"));
} else if (element.parents('.radio-inline').size() > 0) {
error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
} else if (element.parents('.checkbox-list').size() > 0) {
error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
} else if (element.parents('.checkbox-inline').size() > 0) {
error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
} else {
error.insertAfter(element); // for other inputs, just perform default behavior
}
},
highlight: function(element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
//alert("submitting");
var url = $(form).attr('action') ;
var data = $(form).serialize()+'&ajax_validation=1';
var accessArray = $('.access:checked').map(function() { return this.value; }).get();
var musername = $('input[name="musername"]').val();
var mpassword = $('input[name="mpassword"]').val();
var memail = $('input[name="memail"]').val();
var mname = $('input[name="mname"]').val();
var mtype = $('select[name="mtype"]').val();
// form validation success, call ajax form submit
$.ajax({
url: url,
data: {
access : accessArray,
musername: musername,
mpassword:mpassword ,
memail:memail ,
mname: mname,
mtype:mtype
},
type: 'POST',
success: function(result) {
if(result==="ok") {
$("form#add_user")[0].reset();
$('input').prop("checked", false);
$('.alert-success').text("New user has been added");
$('.alert-success', $('#add_user')).show();
} else {
$('.alert-danger').text("error message here");
$('.alert-danger', $('#add_user')).show();
}
}
}); return false;
}
});
$('#add_user').keypress(function(e) {
if (e.which == 13) {
if ($('#add_user').validate().form()) {
$('#add_user').submit(); //form validation success, call ajax form submit
}
return false;
}
});
});
});
</script>
現在，當用戶提交了首次驗證工作。錯誤消息顯示正確。但是，當他們再次點擊提交而無需刷新頁面時，無論是否編輯表單，它都會轉到includes/process_adduser.php文件 - 更糟糕的是，它會跳過我的重複的用戶名驗證。
我錯過了代碼中的任何東西嗎？請提供建議。
對不起，這是一篇很長的文章，我還在學習。謝謝你的幫助。
嗨，謝謝你的回答，但我刪除了你問的部分，但它仍然是一樣的。驗證只適用於第一次嘗試/ – user2960754 2015-02-12 07:05:58
@ user2960754，您是否按照提供的方式_exactly_來回答這個問題？你是否刪除了整個$（'＃add_user'）.presspress'函數？第二個函數還包含一個'submit（）'...你不認爲這會干擾插件的表單提交操作嗎？ – Sparky 2015-02-12 18:03:26
@Sparky嗨，是的，最後我發現我不能使用數組複選框。謝謝 – user2960754 2015-02-23 08:50:00