例如我有一個textfield。本場是強制性的，只有數字是必需的，有價值的長度必須是10。當我嘗試提交表單與值長度是5，出現默認的錯誤消息：Please match the requested format如何更改或刪除HTML5表單驗證的默認錯誤消息？
<input type="text" required="" pattern="[0-9]{10}" value="">
我發現ANKUR答案錯誤，我已經用這種修正固定它：
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')"
onchange="try{setCustomValidity('')}catch(e){}" />
當您設置了無效的輸入數據中看到的錯誤，然後校正輸入併發送形式。 哎呀！你不能這樣做。 我已經測試了Firefox和Chrome
您可以通過約束驗證API進行修改：http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
如果你想要一個簡單的解決方案，你可以搖滾civem.js，自定義輸入驗證錯誤消息的JavaScript的lib 這裏下載：https://github.com/javanto/civem.js 現場演示這裏：http://jsfiddle.net/hleinone/njSbH/
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
我在另一篇文章中發現了這段代碼。
謝謝，它爲我工作。雖然我沒有發現帖子或博客或網站提到這一點。 – user219628 2016-01-27 21:31:11
當考慮使用setCustomValitidy注意以下帖子https://stackoverflow.com/questions/16867407/html5-why-does-my-oninvalid-attribute-let-the-pattern-fail – 2017-11-12 09:34:28
當使用模式=它會顯示不管你把標題ATTRIB，所以無需JS只是做：
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
的setCustomValidity讓您更改默認驗證消息。這裏是如何使用它的簡單例子。
var age = document.getElementById('age');
age.form.onsubmit = function() {
age.setCustomValidity("This is not a valid age.");
};
HTML：
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT：
function InvalidMsg(textbox) {
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('please enter 10 numeric value.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
剛纔設置的自定義消息，一個空白
爲了防止瀏覽器驗證消息出現在文檔中，使用jQuery：210，你可以通過執行以下刪除此警報
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
我找到了一種方法不留神現在： 您可以根據需要使用這樣的：數據錯誤： 「」
<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/>
正如你可以在這裏看到：
html5 oninvalid doesn't work after fixed the input field
是對你很好以這種方式放置，因爲當你解決錯誤時會消除警告信息。
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
我發現Mahoor13答案錯誤，它不是在循環工作，所以我用這個修正固定它：
HTML：
<input type="email" id="eid" name="email_field" oninput="check(this)">
的Javascript：
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
它會pe完美地運行在循環中。
這是我的工作在Chrome
<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')"
簡單，你可以使用 「NOVALIDATE」 爲< form>標籤
我發現Mahoor13答案錯誤，它不是在工作循環，所以我已經修復了它並給出了一些更正的答案，你可以在答案部分找到它。 **這是鏈接** http://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages/42430173#42430173 – 2017-03-15 08:31:53