我有一个带有输入文件的表单,我已经手动序列化了输入,并触发了Jquery Validate validate方法以验证内容,然后执行Ajax调用提交,在这种情况下,我使用多部分formdata。
验证和输入都很好,但是问题是,一旦我单击提交,验证就会触发两次,尤其是在移动设备上。
这就是我触发validate方法的方式,因此我将该方法置于每次我打开某些模式时都会触发的函数中。
以下是我打开模式并隐藏模式后发生的以下功能。
$("#ModalUpdateInsert").on("show.bs.modal", function (event) {
var SubmitType = $('#SubmitType').val();
if(SubmitType == "new"){
$('#btnUpdate').detach().appendTo('.temp_hidden');
$('#btnSave').detach().appendTo('.temp_append_to');
}
else if(SubmitType == "update"){
$('#btnSave').detach().appendTo('.temp_hidden');
$('#btnUpdate').detach().appendTo('.temp_append_to');
}
validate_start_function();
});
$('#ModalUpdateInsert').on('hide.bs.modal', function (event) {
$form = $('form');
$validator = $form.validate(); //init validator
$validator.resetForm();
$form.find('.control-group').removeClass('.error');
$form.find('.has-error').removeClass("has-error");
$form.find('.has-success').removeClass("has-success");
$form.find('.form-control-feedback').remove();
});
这是我的验证功能:
function validate_start_function(){
/// ... custom regex validation
var validate_start = $("#RegisterMerchant").validate({
rules: {
/// ... custom rules rules
},
messages: {
/// ... custom messages
},
highlight: function (element, errorClass) {
/// ... highlight add error class for the input label
},
unhighlight: function (element, errorClass) {
/// ... highlight remove error class for the input label
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
error.css({
'font-size': '10px',
'display': 'inline'
});
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else {
error.insertAfter(element);
}
},
submitHandler: function (form, event_submit) {
event_submit.preventDefault();
var input_parameter = {};
input_parameter.MerchantID = $('#txtMerchantID').val();
input_parameter.PhoneNumber = $('#txtPhone').val();
input_parameter.Email = $('#txtEmail').val();
input_parameter.Password = $('#txtPassword').val();
input_parameter.StoreName = $('#txtMerchantName').val();
//input_parameter.StorePhoneNumber = $('#txtPhone').val();
input_parameter.StoreAddress = $('#txtAddress').val();
input_parameter.StoreAddressNote = $('#txtAddressNote').val();
input_parameter.StoreDescription = $('#txtDescription').val();
input_parameter.StoreOpenTime = $('#txtOpenStore').val();
input_parameter.StoreCloseTime = $('#txtCloseStore').val();
input_parameter.Latitude = $('#txtLat').val();
input_parameter.Longitude = $('#txtLong').val();
input_parameter.OwnerFullName = $('#txtOwnerName').val();
input_parameter.OwnerBirthDate = $('#txtBirthDate').val();
//input_parameter.OwnerPhoneNumber = $('#txtPhone').val();
input_parameter.Gender = $('#slGender').val();
console.log(input_parameter);
var formData = new FormData();
formData.append('json', JSON.stringify(input_parameter));
if (($("#InputFile"))[0].files.length > 0) {
formData.append('file', $('#InputFile')[0].files[0]);
}
//console.log(formData);
alert("submit");
var url = "";
if($('#SubmitType').val() == 'new'){
url = url_local+"/insertmerchant";
}
else{
url = url_local+"/updatemerchantweb";
}
$.ajax({
url : url,
type: 'POST',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: formData,
beforeSend: function() {
$('#wait').show();
},
}).done(function (data) {
$('#ModalUpdateInsert').modal('hide');
$('#wait').show();
datatable.ajax.reload();
}).fail(function (jqXHR, textStatus) {
console.log("failed " + jqXHR + " " + textStatus);
datatable.ajax.reload();
});
return false;
},
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
console.log("error " + errors);
}
});
validate_start.resetForm();
}
验证两次触发;只能起火一次。我是否犯了任何错误,例如无意间两次调用该方法?