jQuery Validate结合规则与submitHandler的AJAX提交异常问题

我仔细看了你的代码，发现问题主要出在拼写错误和HTML原生验证与插件的冲突上，下面一步步帮你解决：

1. 修复规则里的拼写错误 #

你在JS验证规则里把minlength写成了minlenght（最后两个字母顺序颠倒了），这个拼写错误会导致对应的验证规则无法被插件识别，直接打乱了整体验证逻辑，这是核心问题之一。

2. 处理HTML原生验证与插件的冲突 #

你的HTML输入框里添加了required属性，这会触发浏览器的原生表单验证，而jQuery Validate插件在默认状态下，会和原生验证产生冲突——尤其是当你自定义了插件规则时，原生验证可能会跳过插件的逻辑直接执行。建议移除HTML里的required属性，完全依靠插件的规则来控制验证流程。

3. 修正后的完整代码 #

HTML部分： #

<form action="ajax/process.php" enctype="multipart/form-data" method="post" id="newAccount3" class="validate">
  <input type="hidden" name="postOp" value="account-creation-password">
  <input type="password" id="usrPass" name="usrPass" class="form-control mt-3" autofocus data-msg="Trebuie sa introduci o parola">
  <input type="password" id="usrPassConfirm" name="usrPassConfirm" class="form-control mt-3" data-msg="Parolele trebuie sa se potriveasca"><br>
  <button type="submit" class="btn btn-success alert-success px-5 px-sm-3 submitBtn">Continua</button>
</form>
<hr>

JS部分： #

$('.validate').validate({
  ignore: ":hidden",
  rules: {
    usrPass: {
      required: true,
      minlength: 6 // 修正拼写错误
    },
    usrPassConfirm: {
      required: true,
      minlength: 6, // 修正拼写错误
      equalTo: "#usrPass"
    }
  },
  submitHandler: function(form){
    var target = form.id;
    $.post('ajax/process.php',$('#'+target).serialize(),function(response){
      if(response.msg === 'OK-next'){
        location.reload();
      }
    },'json');
    return false;
  }
});

为什么这样能解决问题？ #

• 拼写错误修正后，插件能正确识别minlength规则，确保密码长度验证正常生效；
• 移除HTML原生required属性后，插件完全接管表单验证逻辑，避免了原生验证和插件验证的冲突，确保所有自定义规则（包括密码匹配的equalTo）在任何场景下都能正常触发；
• 当仅一个输入框有内容时，插件会检查另一个输入框的required规则，同时验证已填写输入框的minlength规则，不会直接跳过验证提交表单。

内容的提问来源于stack exchange，提问作者Lucian Minea