blocks|key|51991|text|使用setCustomValidity|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|51992|document.addEventListener("DOMContentLoaded",+function()+{
++++var+elements+=+document.getElementsByTagName("INPUT");
++++for+(var+i+=+0;+i+<+elements.length;+i%2B%2B)+{
++++++++elements[i].oninvalid+=+function(e)+{
++++++++++++e.target.setCustomValidity("");
++++++++++++if+(!e.target.validity.valid)+{
++++++++++++++++e.target.setCustomValidity("This+field+cannot+be+left+blank");
++++++++++++}
++++++++};
++++++++elements[i].oninput+=+function(e)+{
++++++++++++e.target.setCustomValidity("");
++++++++};
++++}
})|code-block|syntax|javascript|51993|正如@itpastorn在评论中建议的那样，我从Mootools获得了changed+to+vanilla+JavaScript，但如果需要的话，你应该能够计算出Mootools的等价物。|51994|编辑|51995|我已经更新了这里的代码，因为setCustomValidity的工作方式与我最初回答时所理解的略有不同。如果setCustomValidity被设置为空字符串以外的任何值，它将导致该字段被视为无效；因此，您必须在测试有效性之前清除它，您不能只设置它就忘记它。|51996|进一步编辑|51997|正如@thomasvdb在下面的注释中所指出的，您需要在invalid之外的某些事件中清除自定义有效性，否则可能需要通过oninvalid处理程序额外传递来清除它。|51998|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity())|1|https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message#comment19641023_5276722|2|http://jsfiddle.net/robertc/X8UXQ/190/^0|2|H|2|H|0|0|0|2|A|1|Z|T|2|0|0|E|H|1I|H|0|0|S|7|1O|9|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]|$9|1H|A|1I|1|1J]]|E|$]]|$1|M|3|N|5|6|7|1K|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]]]

<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_API%27s_element.setCustomValidity()" rel="noreferrer"><code>setCustomValidity</code></a>:</p>
<pre><code>document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    var elements = document.getElementsByTagName(&quot;INPUT&quot;);
    for (var i = 0; i &lt; elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity(&quot;&quot;);
            if (!e.target.validity.valid) {
                e.target.setCustomValidity(&quot;This field cannot be left blank&quot;);
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity(&quot;&quot;);
        };
    }
})
</code></pre>
<p>I <a href="http://jsfiddle.net/robertc/X8UXQ/190/" rel="noreferrer">changed to vanilla JavaScript</a> from Mootools as suggested by <a href="https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message#comment19641023_5276722">@itpastorn</a> in the comments, but you should be able to work out the Mootools equivalent if necessary.</p>
<h3>Edit</h3>
<p>I've updated the code here as <code>setCustomValidity</code> works slightly differently to what I understood when I originally answered.  If <code>setCustomValidity</code> is set to anything other than the empty string it will cause the field to be considered invalid; therefore you must clear it before testing validity, you can't just set it and forget.</p>
<h3>Further edit</h3>
<p>As pointed out in @thomasvdb's comment below, you need to clear the custom validity in some event outside of <code>invalid</code> otherwise there may be an extra pass through the <code>oninvalid</code> handler to clear it.</p>


blocks|key|50701|text|注意：这在Chrome浏览器中不再有效，不能在其他浏览器中测试。请参阅下面的编辑。这个答案留在这里供历史参考。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|50702|如果您觉得验证字符串确实不应该由代码设置，那么可以将输入元素的title属性设置为“此字段不能为空”。(适用于Chrome+10)|50703|title="This+field+should+not+be+left+blank."|code-block|syntax|javascript|50704|请参阅http://jsfiddle.net/kaleb/nfgfP/8/|50705|在Firefox中，您可以添加以下属性：|50706|x-moz-errormessage="This+field+should+not+be+left+blank."|50707|编辑|50708|自从我最初写这个答案以来，这似乎已经改变了。现在，添加标题不会更改有效性消息，它只是向消息添加附录。上面的小提琴仍然适用。|50709|编辑2|50710|从Chrome+51开始，Chrome对title属性不做任何处理。我不确定这是在哪个版本中更改的。|50711|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kaleb/nfgfP/8/^0|0|3|0|0|0|3|Y|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1K|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1M|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

<p><strong>Note:</strong> This no longer works in Chrome, not tested in other browsers.  See edits below.  This answer is being left here for historical reference.</p>

<p>If you feel that the validation string really should not be set by code, you can set you input element's title attribute to read "This field cannot be left blank". (Works in Chrome 10)</p>

<pre><code>title="This field should not be left blank."
</code></pre>

<p>See <a href="http://jsfiddle.net/kaleb/nfgfP/8/" rel="noreferrer">http://jsfiddle.net/kaleb/nfgfP/8/</a></p>

<p>And in Firefox, you can add this attribute:</p>

<pre><code>x-moz-errormessage="This field should not be left blank."
</code></pre>

<h3>Edit</h3>

<p>This seems to have changed since I originally wrote this answer.  Now adding a title does not change the validity message, it just adds an addendum to the message.  The fiddle above still applies.</p>

<h3>Edit 2</h3>

<p>Chrome now does nothing with the title attribute as of Chrome 51. I am not sure in which version this changed.</p>


blocks|key|52020|text|我做了一个小的库来简化错误消息的更改和翻译。你甚至可以通过错误类型来改变文本，这在Chrome中使用title或者在火狐中使用x-moz-errormessage是不可用的。去check+it+out+on+GitHub，并给出反馈。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|52021|它的用法如下：|52022|<input+type="email"+required+data-errormessage-value-missing="Please+input+something">|code-block|syntax|javascript|52023|有一个demo+available+at+jsFiddle。|52024|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/javanto/civem.js|1|http://jsfiddle.net/hleinone/njSbH/^0|1E|5|1R|I|2G|M|0|0|0|0|3|Q|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>I have made a small library to ease changing and translating the error messages. You can even change the texts by error type which is currently not available using <code>title</code> in Chrome or <code>x-moz-errormessage</code> in Firefox. Go <a href="https://github.com/javanto/civem.js">check it out on GitHub</a>, and give feedback.</p>

<p>It's used like:</p>

<pre><code>&lt;input type="email" required data-errormessage-value-missing="Please input something"&gt;
</code></pre>

<p>There's a <a href="http://jsfiddle.net/hleinone/njSbH/">demo available at jsFiddle</a>.</p>


blocks|key|50719|text|在HTML5+oninvalid事件的帮助下，控制自定义消息非常简单|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|50720|代码如下：|50721|User+ID+
<input+id="UserID"++type="text"+required+
+++++++oninvalid="this.setCustomValidity('User+ID+is+a+must')">|code-block|syntax|javascript|50722|entityMap^0|1|5|7|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>It's very simple to control custom messages with the help of the <code>HTML5</code> <code>oninvalid</code> event</p>

<p>Here is the code:</p>

<pre><code>User ID 
&lt;input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')"&gt;
</code></pre>


blocks|key|50731|text|在HTML5+event+oninvalid的帮助下，控制自定义消息非常简单|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|50732|下面是代码：|50733|<input+id="UserID"++type="text"+required="required"
+++++++oninvalid="this.setCustomValidity('Witinnovation')"
+++++++onvalid="this.setCustomValidity('')">|code-block|syntax|javascript|50734|这是最重要的：|50735|onvalid="this.setCustomValidity('')"|50736|entityMap^0|1|5|D|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>It's very simple to control custom messages with the help of <code>HTML5</code> event <code>oninvalid</code></p>

<p>Here is code: </p>

<pre><code>&lt;input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')"&gt;
</code></pre>

<p>This is most important:</p>

<pre><code>onvalid="this.setCustomValidity('')"
</code></pre>


blocks|key|2533916|text|我发现的最简单、最干净的方法是使用data属性来存储您的自定义错误。测试节点的有效性，并通过使用一些自定义的html来处理错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2533917|📷|atomic|offset|length|2533918|​|2533919|le+javascript|2533920|if(node.validity.patternMismatch)
++++++++{
++++++++++++message+=+node.dataset.patternError;
++++++++}|code-block|syntax|javascript|2533921|和一些超级HTML5|2533922|<input+type="text"+id="city"+name="city"+data-pattern-error="Please+use+only+letters+for+your+city."+pattern="[A-z+']*"+required>|2533923|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f6f09e4b224b6efd3a484c433225f9b8.png|imageAlt^0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@$E|14|F|15|1|16]]|A|$]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|1B|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]]]

<p>The easiest and cleanest way I've found is to use a data attribute to store your custom error. Test the node for validity and handle the error by using some custom html. <img src="https://i.stack.imgur.com/NeZ6B.png" alt="enter image description here"></p>

<p>le javascript</p>

<pre><code>if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }
</code></pre>

<p>and some super HTML5</p>

<pre><code>&lt;input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required&gt;
</code></pre>


blocks|key|51439|text|下面是在HTML5中处理自定义错误消息的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51440|<input+type="text"+id="username"+required+placeholder="Enter+Name"
++oninvalid="this.setCustomValidity('Enter+User+Name+Here')"
++oninput="this.setCustomValidity('')"/>|code-block|syntax|javascript|51441|这一部分很重要，因为当用户输入新数据时，它会隐藏错误消息：|51442|oninput="this.setCustomValidity('')"|51443|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here is the code to handle custom error message in HTML5:</p>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;text&quot; id=&quot;username&quot; required placeholder=&quot;Enter Name&quot;
  oninvalid=&quot;this.setCustomValidity('Enter User Name Here')&quot;
  oninput=&quot;this.setCustomValidity('')&quot;/&gt;
</code></pre>
<p>This part is important because it hides the error message when the user inputs new data:</p>
<pre class="lang-html prettyprint-override"><code>oninput=&quot;this.setCustomValidity('')&quot;
</code></pre>


blocks|key|51177|text|试试这个，它更好，而且经过测试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51178|HTML：|51179|<form+id="myform">
++++<input+id="email"+
+++++++++++oninvalid="InvalidMsg(this);"+
+++++++++++oninput="InvalidMsg(this);"
+++++++++++name="email"++
+++++++++++type="email"+
+++++++++++required="required"+/>
++++<input+type="submit"+/>
</form>|code-block|syntax|javascript|51180|JAVASCRIPT:|offset|length|style|BOLD|51181|function+InvalidMsg(textbox)+{
++++if+(textbox.value+===+'')+{
++++++++textbox.setCustomValidity('Required+email+address');
++++}+else+if+(textbox.validity.typeMismatch){
++++++++textbox.setCustomValidity('please+enter+a+valid+email+address');
++++}+else+{
+++++++textbox.setCustomValidity('');
++++}

++++return+true;
}|51182|演示：|51183|http://jsfiddle.net/patelriki13/Sqq8e/|51184|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|B|0|0|0|3|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|14|8|@$K|15|L|16|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|18|8|@$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1B|8|@]|9|@$K|1C|L|1D|1|1E]]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|T]]]]

<p>Try this one, its better and tested:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;form id="myform"&gt;
    &lt;input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" /&gt;
    &lt;input type="submit" /&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JAVASCRIPT:</strong></p>

<pre><code>function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Required email address');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('please enter a valid email address');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}
</code></pre>

<p><strong>Demo:</strong></p>

<p><a href="http://jsfiddle.net/patelriki13/Sqq8e/" rel="noreferrer">http://jsfiddle.net/patelriki13/Sqq8e/</a></p>


blocks|key|2533973|text|通过在正确的时间设置和取消设置setCustomValidity，验证消息将完美地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2533974|<input+name="Username"+required+
oninvalid="this.setCustomValidity('Username+cannot+be+empty.')"+
onchange="this.setCustomValidity('')"+type="text"+/>|code-block|syntax|javascript|2533975|我使用的是onchange而不是oninput，后者更通用，在任何条件下值发生更改时都会发生，即使是通过JavaScript也是如此。|2533976|entityMap^0|F|H|0|0|5|8|G|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>By setting and unsetting the <code>setCustomValidity</code> in the right time, the validation message will work flawlessly.</p>

<pre><code>&lt;input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" /&gt;
</code></pre>

<p>I used <code>onchange</code> instead of <code>oninput</code> which is more general and occurs when the value is changed in any condition even through JavaScript.</p>


blocks|key|2743782|text|我有一个更简单的vanilla+js+only解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2743783|对于复选框：|2743784|document.getElementById("id").oninvalid+=+function+()+{
++++this.setCustomValidity(this.checked+?+''+:+'My+message');
};|code-block|syntax|javascript|2743785|对于输入：|2743786|document.getElementById("id").oninvalid+=+function+()+{
++++this.setCustomValidity(this.value+?+''+:+'My+message');
};|2743787|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I have a simpler vanilla js only solution:</p>

<p>For checkboxes:</p>

<pre><code>document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};
</code></pre>

<p>For inputs:</p>

<pre><code>document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};
</code></pre>


blocks|key|2743793|text|好吧，oninvalid运行得很好，但即使用户输入了有效的数据，它也会显示错误。所以我已经使用下面的方法来解决它，希望它也能为你工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2743794|oninvalid="this.setCustomValidity('Your+custom+message.')"+onkeyup="setCustomValidity('')"|offset|length|style|CODE|2743795|entityMap^0|0|0|1M|1N|V|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

<p>Okay, oninvalid works well but it shows error even if user entered valid data. So I have used below to tackle it, hope it will work for you as well,</p>

<p><code>oninvalid="this.setCustomValidity('Your custom message.')"</code> <code>onkeyup="setCustomValidity('')"</code></p>


blocks|key|51501|text|防止在输入每个符号时出现Google+Chrome错误消息的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51502|​|51503|<p>Click+the+'Submit'+button+with+empty+input+field+and+you+will+see+the+custom+error+message.+Then+put+"-"+sign+in+the+same+input+field.</p>
<form+method="post"+action="#">
++<label+for="text_number_1">Here+you+will+see+browser's+error+validation+message+on+input:</label><br>
++<input+id="test_number_1"+type="number"+min="0"+required="true"
+++++++++oninput="this.setCustomValidity('')"
+++++++++oninvalid="this.setCustomValidity('This+is+my+custom+message.')"/>
++<input+type="submit"/>
</form>

<form+method="post"+action="#">
++<p></p>
++<label+for="text_number_1">Here+you+will+see+no+error+messages+on+input:</label><br>
++<input+id="test_number_2"+type="number"+min="0"+required="true"
+++++++++oninput="(function(e){e.setCustomValidity('');+return+!e.validity.valid+&&+e.setCustomValidity('+')})(this)"
+++++++++oninvalid="this.setCustomValidity('This+is+my+custom+message.')"/>
++<input+type="submit"/>
</form>|code-block|syntax|javascript|51504|51505|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>The solution for preventing Google Chrome error messages on input each symbol:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.&lt;/p&gt;
&lt;form method="post" action="#"&gt;
  &lt;label for="text_number_1"&gt;Here you will see browser's error validation message on input:&lt;/label&gt;&lt;br&gt;
  &lt;input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/&gt;
  &lt;input type="submit"/&gt;
&lt;/form&gt;

&lt;form method="post" action="#"&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;label for="text_number_1"&gt;Here you will see no error messages on input:&lt;/label&gt;&lt;br&gt;
  &lt;input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid &amp;&amp; e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/&gt;
  &lt;input type="submit"/&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2534099|text|只需在字段中添加“title”即可轻松处理：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2534100|<input+type="text"+id="username"+required+title="This+field+can+not+be+empty"++/>|code-block|syntax|javascript|2534101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Can be easily handled by just putting 'title' with the field:</p>

<pre><code>&lt;input type="text" id="username" required title="This field can not be empty"  /&gt;
</code></pre>


blocks|key|2534138|text|如果您的错误消息是单个错误消息，请在下面尝试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2534139|<input+oninvalid="this.setCustomValidity('my+error+message')"
+++++++oninput="this.setCustomValidity('')">++|code-block|syntax|javascript|2534140|要处理多个错误，请尝试下面的方法|2534141|<input+oninput="this.setCustomValidity('')">
<script>
inputElem.addEventListener("invalid",+()=>{
++++if+(inputElem.validity.patternMismatch)+{
++++++return+inputElem.setCustomValidity('my+error+message')
++++}
++++return+inputElem.setCustomValidity('')+//+default+message
})
</script>|2534142|示例|2534143|您可以测试valueMissing和valueMissing。|2534144|​|2534145|<form>
<input+pattern="[%5E\\/:\x22*?<>%7C]%2B"
+++++++placeholder="input+file+name"+++++++
+++++++oninput="this.setCustomValidity('')"
+++++++required
>
++<input+type="submit">
</form>

<script>
++const+form+=+document.querySelector("form")

++const+inputElem+=+document.querySelector(`input`)

++inputElem.addEventListener("invalid",+()=>{+++
++++if+(inputElem.validity.patternMismatch)+{
++++++return+inputElem.setCustomValidity('Illegal+Filename+Characters+\\/:\x22?<>%7C')
++++}
++++return+inputElem.setCustomValidity('')+//+return+default+message+according+inputElem.validity.{badInput,+customError,+tooLong,+valueMissing+...}
++})

++form.onsubmit+=+()+=>+{
++++return+false
++}
</script>|2534146|2534147|2534148|ValidityState|unordered-list-item|offset|length|2534149|2534150|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/ValidityState^0|0|0|0|0|0|0|0|0|0|0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|S|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1I|8|@]|9|@$X|1J|Y|1K|1|1L]]|A|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>If your error message is a single one, then try below.</p>
<pre class="lang-html prettyprint-override"><code>&lt;input oninvalid=&quot;this.setCustomValidity('my error message')&quot;
       oninput=&quot;this.setCustomValidity('')&quot;&gt;  &lt;!--  don't forget it. --&gt;
</code></pre>
<p>To handle multiple errors, try below</p>
<pre class="lang-html prettyprint-override"><code>&lt;input oninput=&quot;this.setCustomValidity('')&quot;&gt;
&lt;script&gt;
inputElem.addEventListener(&quot;invalid&quot;, ()=&gt;{
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('my error message')
    }
    return inputElem.setCustomValidity('') // default message
})
&lt;/script&gt;
</code></pre>
<h2>Example</h2>
<p>You can test valueMissing and valueMissing.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
&lt;input pattern="[^\\/:\x22*?&lt;&gt;|]+"
       placeholder="input file name"       
       oninput="this.setCustomValidity('')"
       required
&gt;
  &lt;input type="submit"&gt;
&lt;/form&gt;

&lt;script&gt;
  const form = document.querySelector("form")

  const inputElem = document.querySelector(`input`)

  inputElem.addEventListener("invalid", ()=&gt;{   
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22?&lt;&gt;|')
    }
    return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...}
  })

  form.onsubmit = () =&gt; {
    return false
  }
&lt;/script&gt;</code></pre>
</div>
</div>
</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" rel="nofollow noreferrer">ValidityState</a></li>
</ul>


<p>I've got the following HTML5 form: <a href="http://jsfiddle.net/nfgfP/" rel="noreferrer">http://jsfiddle.net/nfgfP/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="form" onsubmit="return(login())"&gt;
&lt;input name="username" placeholder="Username" required /&gt;
&lt;input name="pass"  type="password" placeholder="Password" required/&gt;
&lt;br/&gt;Remember me: &lt;input type="checkbox" name="remember" value="true" /&gt;&lt;br/&gt;
&lt;input type="submit" name="submit" value="Log In"/&gt;</code></pre>
</div>
</div>
</p>

<p>Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot be left blank"?</p>

<p><strong>EDIT:</strong> Also note that the type password field's error message is simply <code>*****</code>. To recreate this give the username a value and hit submit.</p>

<p><strong>EDIT</strong>: I'm using Chrome 10 for testing. Please do the same</p>


HTML5 form required attribute. Set custom validation message?

HTML5

我得到了以下HTML5表单：​<form id="form" onsubmit="return(login())"><input name="username" placeholder="Username" required /><input name="pass"  type="password" placehold...

问HTML5表单必需属性。是否设置自定义验证消息？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5表单必需属性。是否设置自定义验证消息？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5表单必需属性。是否设置自定义验证消息？
EN