jQuery Validation：AJAX校验分支无法显示自定义验证消息求助

我已基于jQuery Validation实现了有效的ID格式校验逻辑，运行正常。现需新增规则：当AJAX接口返回的content为true时，显示“ID已被列入黑名单，请更换有效ID”的验证提示。我添加了对应规则，流程已进入该分支，但验证消息未显示，烦请排查是否存在语法缺失？

接口返回示例：

{
 "id": "4974635f-514e-4d26-8170-ae77c984e8ab",
 "content": "true",
 "status": "SUCCESS",
 "redirect": null
}

现有代码：

$.validator.addMethod('IDNumber', function (value) { 
    return  /^[STFGstfg]\d{7}[a-zA-Z]$/.test(value); 
}, 'Please enter a valid ID number');

$("#signup--form").validate({
    rules:{
        "id-no": {
              required: true,
              IDNumber: true
        }
    },
    messages:{
        "id-no":{
            required: 'Please enter a valid ID number'
        }
    },
    submitHandler: function submitHandler() {
      var checkID = $('#id-no').val();
      var getDomainName = window.location.origin;
      $.ajax({
          url: getDomainName + '/.rest/stripe/v1?id=' +checkID,
          type:'GET',
          dataType: 'json',
          success: function(response) {
            if(response.content == 'false'){
               popupSubmit();
            } else{
                $('#id-no').rules('add', {
                    messages: {
                        required: 'ID no. is blacklisted. Please try with another valid ID'
                    }
                });
            }
          }
       });
       return false;
    }
});

<form id="signup--form">
    <div class="row">
        <div class="col-lg-12">
            <div class="input-field--wrapper">
                <div class="title">
                    ID of the subscriber
                </div>
                <input class="form-control" value="" placeholder="D1234567U" id="id-no" name="id-no" autocomplete="off" required/>
            </div>
        </div>
    </div>

    <div class="button-wrapper">
        <button type="submit" value="Submit" class="button button-primary">Confirm</button>
    </div>
</form>

问题原因分析 #

1. submitHandler执行时机错误：submitHandler是表单所有校验通过后才会触发的回调，此时表单已经处于"校验通过"状态，修改规则消息不会触发重新校验，自然不会显示错误提示。
2. rules('add')用法错误：你试图修改required规则的消息，但required规则本身已经满足（输入框有值），即使修改消息，也不会触发该规则的错误提示逻辑。

解决方案 #

方案1：使用内置remote规则（推荐）

jQuery Validation内置的remote规则专门用于AJAX校验，会自动处理校验状态和错误提示，无需手动编写AJAX逻辑：

$.validator.addMethod('IDNumber', function (value) { 
    return  /^[STFGstfg]\d{7}[a-zA-Z]$/.test(value); 
}, '请输入有效的ID号码');

$("#signup--form").validate({
    rules:{
        "id-no": {
              required: true,
              IDNumber: true,
              remote: {
                  url: window.location.origin + '/.rest/stripe/v1',
                  type: 'GET',
                  data: {
                      id: function() {
                          return $('#id-no').val();
                      }
                  },
                  dataFilter: function(response) {
                      // 转换接口返回值为校验结果：content为'false'表示通过，'true'表示不通过
                      var res = JSON.parse(response);
                      return res.content === 'false';
                  }
              }
        }
    },
    messages:{
        "id-no":{
            required: '请输入有效的ID号码',
            IDNumber: '请输入有效的ID号码',
            remote: 'ID已被列入黑名单，请更换有效ID'
        }
    },
    submitHandler: function() {
        // 所有校验（包括黑名单校验）通过后执行提交逻辑
        popupSubmit();
    }
});

方案2：手动触发错误提示（兼容原有逻辑）

如果坚持在submitHandler中处理AJAX，需要手动标记输入框错误状态并插入提示：

$.validator.addMethod('IDNumber', function (value) { 
    return  /^[STFGstfg]\d{7}[a-zA-Z]$/.test(value); 
}, 'Please enter a valid ID number');

$("#signup--form").validate({
    rules:{
        "id-no": {
              required: true,
              IDNumber: true
        }
    },
    messages:{
        "id-no":{
            required: 'Please enter a valid ID number'
        }
    },
    submitHandler: function submitHandler(form) {
      var checkID = $('#id-no').val();
      var getDomainName = window.location.origin;
      $.ajax({
          url: getDomainName + '/.rest/stripe/v1?id=' +checkID,
          type:'GET',
          dataType: 'json',
          success: function(response) {
            if(response.content == 'false'){
               popupSubmit();
            } else{
                // 手动标记输入框为错误状态
                $('#id-no').addClass('error').attr('aria-invalid', 'true');
                // 创建或更新错误提示标签
                var errorLabel = $('#id-no-error');
                if(errorLabel.length){
                    errorLabel.text('ID已被列入黑名单，请更换有效ID').show();
                } else {
                    $('<label id="id-no-error" class="error" for="id-no">ID已被列入黑名单，请更换有效ID</label>').insertAfter('#id-no');
                }
                // 让校验器识别表单错误状态
                $(form).data('validator').invalidate();
            }
          },
          error: function() {
              // 处理AJAX请求失败情况
              $('#id-no').addClass('error').attr('aria-invalid', 'true');
              $('<label id="id-no-error" class="error" for="id-no">校验失败，请重试</label>').insertAfter('#id-no');
          }
       });
       return false;
    }
});

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