使用jquery.validation.min.js进行远程验证

时间:2018-11-01 07:54:15

标签: javascript jquery jquery-validate

我正在尝试使用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;
  }
 });

验证工作正常。它显示消息。但是表单要提交两次。如果我删除远程验证,则表单仅提交一次。我已经观察到使用远程功能表单要提交两次。怎么避免这种情况?

1 个答案:

答案 0 :(得分:0)

Remote是一个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"
  }
 },
});