Question

我正在使用HTML5验证表单并使用更改错误消息文本 setCustomValidity。除了某些原因我不能让这个工作。我在控制台或任何东西都没有收到错误消息。我正在尝试使用“数据错误”属性中的内容并将其用作自定义错误消息，但无法解决这个问题，我已经花了好几个小时。

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

    }

});

jQuery自定义html5错误消息

1 个答案: