jQuery 自定义 html5 错误消息

Question

我正在使用 HTML5 来验证表单并使用更改错误消息文本 设置自定义有效性。除了某种原因，我无法让它工作。我在控制台或其他任何地方都没有收到任何错误消息。我正在尝试获取“data-error”属性中的内容并将其用作自定义错误消息，但无法弄清楚我已经花了几个小时。

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));
     }
     };
    }                        
   });

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" />

Answer 1

你的声明 var errorMessage = $this.attr("data-error"); 已经获取了消息，然后你试图获取名称与消息名称相同的属性。 e.target.setCustomValidity(e.target.getAttribute(errorMessage));。此语句中的 errorMessage 是消息而不是属性名称，而是 消息 本身。所以你的意思可能是 e.target.setCustomValidity(errorMessage);

顺便说一下，你可以只使用 $this.data("error") 来检索 data-* 值，前提是它不会即时改变.

那么试试这个:-

$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);
     }
     };
    }                        
   });

因为您使用的是 jquery，所以只需简化一下:

$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);

    }

});