jQuery Validate自定义必填校验提示不生效如何解决

问题描述 #

自定义表单字段校验失败的错误提示时，页面始终显示默认提示This field is required，已在配置中添加messages块编写自定义提示内容，现有配置代码如下：

rules: {
    fullname: {
        required: true,
    }
},
messages: {
    fullname: {
        required: "Please enter your full name",
    },
}, 
submitHandler: function(form) {
  form.submit();
}
});

修复方案 #

按以下优先级排查问题：

• 确认表单字段的name属性匹配配置键名
  jQuery Validate 依靠表单元素的name属性绑定规则，和元素id无关。检查对应fullname输入框，必须存在属性name="fullname"，漏写、错写name属性都会导致自定义规则和提示无法绑定，正确的输入框示例：

  <input type="text" name="fullname" class="form-control">
  

• 移除输入框上的原生required属性
  如果输入框标签上写了原生的required属性，浏览器原生校验会在jQuery Validate逻辑执行前触发，弹出浏览器默认的必填提示，删掉标签上的required属性即可，校验逻辑已经通过配置里的required: true声明。
• 确认未重复初始化校验实例
  同一个表单只能调用一次.validate()方法完成初始化，如果后续对同一个表单再次调用.validate()且没有传入自定义messages配置，会覆盖之前的配置，导致提示回到默认文本。如果需要后续动态修改规则，使用.rules()方法操作即可。
• 确认初始化选中的DOM元素正确
  调用.validate()方法的jQuery对象必须是你要校验的表单元素本身，如果选中了表单内部的子元素（比如输入框、提交按钮、包裹div），校验配置不会正常生效。

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