所以我正在做一个注册表（对于admin），使用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文件 - 更糟糕的是，它会跳过我重复的用户名验证。
我在代码中遗漏了什么吗？请劝告。
很抱歉，这是一篇很长的帖子，我还在学习。谢谢你的帮助。
答案 0 :(得分：1)
我唯一能看到的问题是如何初始化验证插件，你应该在dom ready handler上初始化插件而不是在提交点击处理程序中。
jQuery(document).ready(function () {
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;
}
});
});