blocks|key|230801|text|这是JavaScript解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230802|+<input+type="text"
++++pattern="[a-zA-Z]%2B"
++++oninvalid="setCustomValidity('Please+enter+Alphabets.')"
++++onchange="try{setCustomValidity('')}catch(e){}"+/>|code-block|syntax|javascript|230803|当您设置无效的输入数据，然后更正输入并再次发送表单时，需要使用"onchange“事件。我已经在火狐、Chrome和Safari上测试过了。|230804|适用于现代浏览器的：|offset|length|style|BOLD|230805|现代浏览器不需要任何JavaScript来进行验证。就像这样做：|230806|<input+type="text"
++++pattern="[a-zA-Z]%2B"
++++title="Please+enter+Alphabets."
++++required=""+/>|230807|entityMap^0|0|0|0|9|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>This is the JavaScript solution:</p>
<pre><code> &lt;input type=&quot;text&quot;
    pattern=&quot;[a-zA-Z]+&quot;
    oninvalid=&quot;setCustomValidity('Please enter Alphabets.')&quot;
    onchange=&quot;try{setCustomValidity('')}catch(e){}&quot; /&gt;
</code></pre>
<p>The &quot;onchange&quot; event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.</p>
<p><strong>But for Modern Browsers:</strong></p>
<p>Modern browsers didn't need any JavaScript for validation.
Just do it like this:</p>
<pre><code>&lt;input type=&quot;text&quot;
    pattern=&quot;[a-zA-Z]+&quot;
    title=&quot;Please enter Alphabets.&quot;
    required=&quot;&quot; /&gt;
</code></pre>


blocks|key|3101808|text|当使用pattern=时，它将显示您放在标题属性中的任何内容，因此不需要JS，只需执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3101809|<input+type="text"+required=""+pattern="[0-9]{10}"+value=""+title="This+is+an+error+message"+/>|code-block|syntax|javascript|3101810|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>When using pattern= it will display whatever you put in the title attrib, so no JS required just do:</p>

<pre><code>&lt;input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" /&gt;
</code></pre>


blocks|key|230766|text|<input+type="text"+pattern="[a-zA-Z]%2B"
oninvalid="setCustomValidity('Plz+enter+on+Alphabets+')"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|230767|我在另一篇文章中找到了这段代码。|unstyled|230768|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" /&gt;
</code></pre>

<p>I found this code in another post.</p>


blocks|key|2887745|text|您可以通过执行以下操作来删除此警报：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887746|<input+type="text"+pattern="[a-zA-Z]%2B"
++++oninvalid="setCustomValidity('+')"
/>|code-block|syntax|javascript|2887747|只需将自定义消息设置为一个空格|2887748|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you can remove this alert by doing following:</p>

<pre><code>&lt;input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/&gt;
</code></pre>

<p>just set the custom message to one blank space</p>


blocks|key|2887767|text|要防止浏览器验证消息出现在文档中，请使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887768|$('input,+select,+textarea').on("invalid",+function(e)+{
++++e.preventDefault();
});|code-block|syntax|javascript|2887769|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>To prevent the browser validation message from appearing in your document, with jQuery:</p>

<pre><code>$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});
</code></pre>


blocks|key|227050|text|您可以通过约束验证api更改它们：http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|227051|如果您想要一个简单的解决方案，您可以摇滚乐civem.js，自定义输入验证错误消息JavaScript库在这里下载：https://github.com/javanto/civem.js现场演示在这里：http://jsfiddle.net/hleinone/njSbH/|227052|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity|1|https://github.com/javanto/civem.js|2|http://jsfiddle.net/hleinone/njSbH/^0|H|1X|0|0|1M|Z|1|2T|Z|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

<p>you can change them via constraint validation api: <a href="http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity" rel="noreferrer">http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity</a>  </p>

<p>if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib
download here: <a href="https://github.com/javanto/civem.js" rel="noreferrer">https://github.com/javanto/civem.js</a>
live demo here: <a href="http://jsfiddle.net/hleinone/njSbH/" rel="noreferrer">http://jsfiddle.net/hleinone/njSbH/</a></p>


blocks|key|2887704|text|允许您更改默认验证message.Here的setCustomValidity是如何使用它的一个简单示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887705|var+age++=++document.getElementById('age');
++++age.form.onsubmit+=+function+()+{
++++age.setCustomValidity("This+is+not+a+valid+age.");
+};|code-block|syntax|javascript|2887706|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>The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.</p>

<pre><code>var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };
</code></pre>


blocks|key|3101901|text|我现在偶然发现了一种方法:你可以使用这个:+data-error:"“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3101902|<input+type="username"+class="form-control"+name="username"+value=""
placeholder="the+least+4+character"
data-minlength="4"+data-minlength-error="the+least+4+character"
data-error="This+is+a+custom+Errot+Text+fot+patern+and+fill+blank"
max-length="15"+pattern="[A-Za-z0-9]{4,}"
title="4~15+character"+required/>|code-block|syntax|javascript|3101903|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>I Found a way Accidentally Now:
you can need use this: data-error:"" </p>

<pre><code>&lt;input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/&gt;
</code></pre>


blocks|key|230870|text|这是我找到的关于检查html5验证的各种属性的一个非常好的链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230871|https://dzone.com/articles/custom-validation-messages|offset|length|230872|希望这能帮助到别人。|230873|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1H|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|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>This is a very good link I found about checking various attributes of html5 validations.</p>

<p><a href="https://dzone.com/articles/custom-validation-messages" rel="nofollow">https://dzone.com/articles/custom-validation-messages</a></p>

<p>Hope it helps someone.</p>


blocks|key|3101946|text|我在Mahoor13+answer上发现了一个bug，它不能在循环中工作，所以我用这个更正修复了它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3101947|HTML：|3101948|<input+type="email"+id="eid"+name="email_field"+oninput="check(this)">|code-block|syntax|javascript|3101949|Javascript:|offset|length|style|BOLD|3101950|function+check(input)+{++
++++if(input.validity.typeMismatch){++
++++++++input.setCustomValidity("Dude+'"+%2B+input.value+%2B+"'+is+not+a+valid+email.+Enter+something+nice!!");++
++++}++
++++else+{++
++++++++input.setCustomValidity("");++
++++}+++++++++++++++++
}++|3101951|它将完美地循环运行。|3101952|entityMap^0|0|0|0|0|B|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:</p>

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

<pre><code>&lt;input type="email" id="eid" name="email_field" oninput="check(this)"&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  
</code></pre>

<p>It will perfectly running in loop.</p>


blocks|key|3102033|text|若要为HTML+5验证设置自定义错误消息，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3102034|oninvalid="this.setCustomValidity('Your+custom+message+goes+here.')"|code-block|syntax|javascript|3102035|并在用户输入有效数据使用时删除此消息，|3102036|onkeyup="setCustomValidity('')"|3102037|希望这对你有用。享受;)|3102038|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>To set custom error message for HTML 5 validation use,</p>

<pre><code>oninvalid="this.setCustomValidity('Your custom message goes here.')"
</code></pre>

<p>and to remove this message when user enters valid data use,</p>

<pre><code>onkeyup="setCustomValidity('')"
</code></pre>

<p>Hope this works for you. Enjoy ;)</p>


blocks|key|232279|text|正如你在这里看到的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232280|html5+oninvalid+doesn't+work+after+fixed+the+input+field|offset|length|232281|最好用这种方式，因为当您修复错误时，警告消息就消失了。|232282|<input+type="text"+pattern="[a-zA-Z]%2B"
oninvalid="this.setCustomValidity(this.willValidate?'':'your+custom+message')"+/>|code-block|syntax|javascript|232283|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/14834276/5497937^0|0|0|1K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>As you can see here:</p>

<p><a href="https://stackoverflow.com/a/14834276/5497937">html5 oninvalid doesn't work after fixed the input field</a></p>

<p>Is good to you put in that way, for when you fix the error disapear the warning message.</p>

<pre><code>&lt;input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" /&gt;
</code></pre>


blocks|key|232299|text|这是我在Chrome中的工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232300|​|232301|<input+type="text"+name="product_title"+class="form-control"+
++++required+placeholder="Product+Name"+value=""+pattern="([A-z0-9À-ž\s]){2,}"
++++oninvalid="setCustomValidity('Please+enter+on+Producut+Name+at+least+2+characters+long')"+/>|code-block|syntax|javascript|232302|232303|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>This is work for me in Chrome</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;input type="text" name="product_title" class="form-control" 
    required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
    oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|232305|text|您可以简单地为<+form+>标记使用"novalidate“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|232306|click+here+for+more+deteails|offset|length|232307|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/3094185/9384789^0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>simply you can use "novalidate" for &lt; form > tag</p>

<p><a href="https://stackoverflow.com/a/3094185/9384789">click here for more deteails</a></p>


<p>For example I have a <code>textfield</code>. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: <code>Please match the requested format</code>    </p>

<pre><code>&lt;input type="text" required="" pattern="[0-9]{10}" value=""&gt;
</code></pre>

<ol>
<li>How can I change HTML 5 form validation errors default messages?</li>
<li>If 1st point can be done, so Is there a way to create some property files and set in that files custom error messages?</li>
</ol>


How can I change or remove HTML5 form validation default error messages?

jQuery

HTML5

例如，我有一个textfield。此字段为必填字段，只需要数字，值的长度必须为10。当我尝试提交长度为5的值的表单时，默认错误消息出现：Please match the requested format<input type="text" required="" pattern="[0-9]{10}" value="">如何更改HTML5表单验证错误默认消息？如果第1点可以完成，那么是否可以创建一

问如何更改或删除HTML5表单验证默认错误消息？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改或删除HTML5表单验证默认错误消息？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改或删除HTML5表单验证默认错误消息？
EN