使用jquery.validation.min.js進行遠程驗證

Question

我正在嘗試使用jquery.validate.min.js插件驗證表單。

我已經使用遠程方法來驗證移動設備是否已經存在。 我用下面的代碼

 $('#userprofileform').validate({
 rules:
"UserForm[mobile]": {
    remote: {
        url: "<?php echo Yii::$app->request->BaseUrl.'/profile/check-mobile'; ?>",
        type: "post",
        data: {
            mobile: function(){ return $("#userform-mobile").val(); }
        }
    }
 },
},
messages: {
'UserForm[mobile]':{
    remote:"Mobile already exists"
}

},
});

點擊提交后，我編寫了以下代碼：

$('.userprofilesubmit').click(function(){
  if (!$('#userprofileform').valid() === true){
   return false;
  }
 });

驗證工作正常。 它顯示消息。 但是表單要提交兩次。 如果我刪除遠程驗證，則表單僅提交一次。 我已經觀察到使用遠程功能表單要提交兩次。 怎么避免這種情況？

Answer 1

遠程是一個ajax調用，它在響應中導致“ true”或“ false”。 因此，如果您以ajax形式提交表單，並且每當響應為true時，都會提交表單。 如果您有4個字段的4個遠程驗證，則表單將被提交4次。

因此，每當您編寫遠程驗證時，請使用async:false以避免表單提交，如下所示

 $('#userprofileform').validate({
   rules:
   "UserForm[mobile]": {
      remote: {
      url: "<?php echo Yii::$app->request->BaseUrl.'/profile/check-mobile'; ?>",
      type: "post",
      data: {
        mobile: function(){ return $("#userform-mobile").val(); }
      },
      async: false,
     }
    },
   },
 messages: {
   'UserForm[mobile]':{
   remote:"Mobile already exists"
  }
 },
});