4

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

查询

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

1 回答 1

9

您的语句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);

    }

});
于 2013-06-12T02:47:50.713 回答