jQuery自定义html5错误消息

我正在使用HTML5来验证表单并使用 setCustomValidity更改错误消息文本。除了某种原因，我只是无法得到这个工作。我在控制台或任何东西中都没有收到错误消息。我正在尝试使用“数据错误”属性中的内容，并将其用作自定义错误消息，但无法弄清楚，因为我已花费了数小时的时间。jQuery自定义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)); 
    } 
    }; 
    }       
    });

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

来源

2013-06-12 Delmon Young

人们往往喜欢从网站的其余部分隔离的问题。这有助于精神集中。你可以制作一个包含问题行为的jsfiddle，并通过点击“编辑”将jsfiddle链接粘贴到你的问题中？如果你这样做，有人可能会提供帮助。 http://jsfiddle.net/ – Paul

孤立地看，$ aboutUs看起来很奇怪。它是否设置在其他地方？ – Paul

你的陈述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-12 02:47:50 PSL

感谢您的回复，但我迷失了这不适合我。如果我试图在这个** $ this [i] .oninvalid = function（e）{**我没有得到任何东西。 –

什么时候调用了'$ this [i] .oninvalid'处理函数？ – PSL

我甚至不确定它是否是。我对jquery很新，我将如何检查并调用它？ –

jQuery自定义html5错误消息

回答

相关问题