jQuery自定义html5错误消息

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

    }

});