jQuery自定义html5错误消息

我正在使用HTML5验证表单，并使用 设置自定义有效性。除了某些原因，我就是不能让它工作。我在控制台中没有收到任何错误消息。我正在尝试获取“数据错误”属性中的内容，并将其用作自定义错误消息，但无法理解我在这方面花费了数小时

JQUERY

$aboutUs.find("#headerForm :input").each(function(){ 
  var $this = $(this); 
  var errorMessage = $this.attr("data-error");
   for (var i = 0; i < $this.length; i++) {
     $this[i].oninvalid = function(e) {
     e.target.setCustomValidity("test");
     if (!e.target.validity.valid) {
     e.target.setCustomValidity(e.target.getAttribute(errorMessage));
     }
     };
    }                        
   });

$aboutUs.find（#headerForm:input”）.each（function（）{
var$this=$（this）；
var errorMessage=$this.attr（“数据错误”）；
对于（变量i=0；i<$this.length；i++）{
$this[i].oninvalid=函数（e）{
e、 目标有效性（“测试”）；
如果（！e.target.validity.valid）{
e、 target.setCustomValidity（例如target.getAttribute（errorMessage））；
}
};
}                        
});

HTML表单

<input id="firstName" type="text" required data-error="First Name Message" />
<input id="lastName" type="text" required data-error="Last Name Message" />
<input id="phone" type="text" required data-error="Phone Message" />

---

您的语句

var errorMessage=$this.attr（“数据错误”）

已获取消息，然后您将尝试获取名称与消息名称相同的属性<代码>e.target.setCustomValidity（e.target.getAttribute（errorMessage））<此语句中的code>errorMessage是消息而不是属性名，而是消息本身。所以你的意思可能是

e.target.setCustomValidity（errorMessage）

顺便说一句，您可以使用
$this.data（“error”）
来检索
数据-*
值，前提是该值不会动态更改

所以试试这个：-

$aboutUs.find("#headerForm :input").each(function(){ 
  var $this = $(this); 
  var errorMessage = $this.data("error");
   for (var i = 0; i < $this.length; i++) {
     $this[i].oninvalid = function(e) {
     if (!e.target.validity.valid) {
          e.target.setCustomValidity(errorMessage);
     }
     };
    }                        
   });

这里的人通常喜欢将问题与网站的其他部分隔离开来。这有助于精神集中。您能否制作一个包含问题行为的JSFIDLE，并通过单击“编辑”将JSFIDLE链接粘贴到您的问题中？如果你这样做，可能会有人帮你。单独来看，$aboutUs看起来很奇怪。是在别的地方设置的吗？谢谢你的回复，但我迷路了，这对我不起作用。如果我试图在$this[I].oninvalid=function（e）{中抛出一个console.log，我什么也得不到。什么时候是
$this[I].oninvalid
处理程序调用了吗？我甚至不确定是否调用了。我对jquery非常陌生，我如何检查并调用它？您能否以小提琴的形式复制该问题。很抱歉@PSL响应延迟，但您在jsfiddle上所做的工作非常好！非常感谢您的帮助！
$aboutUs.find("#headerForm :input").on('invalid', function (e) {
    var errorMessage = $(this).data("error");
   e.target.setCustomValidity("");
    if (e.target.validity.valueMissing) {
         e.target.setCustomValidity(errorMessage);

    }

});