jQuery Validate验证意外触发两次(应该仅触发一次)

时间:2019-07-03 07:54:17

标签: javascript jquery jquery-validate

我有一个带有输入文件的表单,我已经手动序列化了输入,并触发了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();
}

验证两次触发;只能起火一次。我是否犯了任何错误,例如无意间两次调用该方法?

0 个答案:

没有答案
相关问题