[英]Set custom HTML5 required field validation message
我有一個包含許多輸入字段的表單。 我已經把 html5 驗證
<input type="text" name="topicName" id="topicName" required />
當我提交表單而不填寫此文本框時,它會顯示默認消息,例如
"Please fill out this field"
誰能幫我編輯這條消息?
我有一個 javascript 代碼來編輯它,但它不起作用
$(document).ready(function() {
var elements = document.getElementsByName("topicName");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please enter Room Topic Title");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
我有以下 HTML 表格
<form id="myform">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
我想要的驗證消息。
必填項:請輸入 Email 地址
錯誤的 Email: “testing@.com”不是有效的 Email 地址。 (此處,輸入的 email 地址顯示在文本框中)
我試過這個。
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");
}
else {
input.setCustomValidity("");
}
}
這個 function 不能正常工作,你有沒有其他方法可以做到這一點? 將不勝感激。
由於這個答案得到了很多關注,這是我想出的一個很好的可配置片段:
/**
* @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
* @link https://stackoverflow.com/a/16069817/603003
* @license MIT 2013-2015 ComFreek
* @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
* You MUST retain this license header!
*/
(function (exports) {
function valOrFunction(val, ctx, args) {
if (typeof val == "function") {
return val.apply(ctx, args);
} else {
return val;
}
}
function InvalidInputHelper(input, options) {
input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));
function changeOrInput() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity("");
}
}
function invalid() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
}
}
input.addEventListener("change", changeOrInput);
input.addEventListener("input", changeOrInput);
input.addEventListener("invalid", invalid);
}
exports.InvalidInputHelper = InvalidInputHelper;
})(window);
→ jsFiddle
<input id="email" type="email" required="required" />
InvalidInputHelper(document.getElementById("email"), {
defaultText: "Please enter an email address!",
emptyText: "Please enter an email address!",
invalidText: function (input) {
return 'The email address "' + input.value + '" is invalid!';
}
});
defaultText
最初顯示emptyText
(被清除)invalidText
當輸入被瀏覽器標記為無效時顯示(例如當它不是有效的電子郵件地址時) 您可以為三個屬性中的每一個分配一個字符串或一個函數。
如果您分配一個函數,它可以接受對輸入元素(DOM 節點)的引用,並且必須返回一個字符串,然后將其顯示為錯誤消息。
測試於:
您可以在此處查看舊版本: https : //stackoverflow.com/revisions/16069817/6
您可以使用 oninvalid 屬性簡單地實現此目的,請查看此演示代碼
<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/>
<input type="submit"/>
</form>
Codepen 演示: https ://codepen.io/akshaykhale1992/pen/yLNvOqP
HTML:
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>
爪哇腳本:
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;
}
演示:
試試這個:
$(function() {
var elements = document.getElementsByName("topicName");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("Please enter Room Topic Title");
};
}
})
我在 Chrome 和 FF 中對此進行了測試,並且在兩種瀏覽器中都可以使用。
伙計,我從未在 HTML 5 中這樣做過,但我會嘗試。 看看這個小提琴。
我在輸入標簽上使用了一些 jQuery、HTML5 原生事件和屬性以及自定義屬性(如果您嘗試驗證代碼,這可能會導致問題)。 我沒有在所有瀏覽器中測試過,但我認為它可能有效。
這是使用 jQuery 的字段驗證 JavaScript 代碼:
$(document).ready(function()
{
$('input[required], input[required="required"]').each(function(i, e)
{
e.oninput = function(el)
{
el.target.setCustomValidity("");
if (el.target.type == "email")
{
if (el.target.validity.patternMismatch)
{
el.target.setCustomValidity("E-mail format invalid.");
if (el.target.validity.typeMismatch)
{
el.target.setCustomValidity("An e-mail address must be given.");
}
}
}
};
e.oninvalid = function(el)
{
el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
};
});
});
好的。 這是簡單的表單html:
<form method="post" action="" id="validation">
<input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
<input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />
<input type="submit" value="Send it!" />
</form>
屬性requiredmessage
就是我講的自定義屬性。 您可以為每個必填字段設置消息,因為 jQuery 會在顯示錯誤消息時從中獲取。 您不必在 JavaScript 上正確設置每個字段,jQuery 會為您完成。 該正則表達式似乎很好(至少它阻止了您的testing@.com
!哈哈)
正如你在小提琴上看到的,我對提交表單事件進行了額外的驗證(這也發生在 document.ready 上):
$("#validation").on("submit", function(e)
{
for (var i = 0; i < e.target.length; i++)
{
if (!e.target[i].validity.valid)
{
window.alert(e.target.attributes.requiredmessage.value);
e.target.focus();
return false;
}
}
});
我希望這對您有用或對您有所幫助。
這對我很有效:
jQuery(document).ready(function($) {
var intputElements = document.getElementsByTagName("INPUT");
for (var i = 0; i < intputElements.length; i++) {
intputElements[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
if (e.target.name == "email") {
e.target.setCustomValidity("Please enter a valid email address.");
} else {
e.target.setCustomValidity("Please enter a password.");
}
}
}
}
});
以及我使用它的形式(已截斷):
<form id="welcome-popup-form" action="authentication" method="POST">
<input type="hidden" name="signup" value="1">
<input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
<input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
<input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>
您可以根據您的需要為所有相同類型的輸入或僅一個輸入設置“無效”的事件偵聽器,然后設置正確的消息。
[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
emailElement.addEventListener('invalid', function() {
var message = this.value + 'is not a valid email address';
emailElement.setCustomValidity(message)
}, false);
emailElement.addEventListener('input', function() {
try{emailElement.setCustomValidity('')}catch(e){}
}, false);
});
腳本的第二部分,有效性消息將被重置,否則將無法提交表單:例如,即使電子郵件地址已更正,這也會阻止觸發消息。
此外,您不必按要求設置輸入字段,因為一旦您開始輸入,就會觸發“無效”。
這是一個小提琴: http : //jsfiddle.net/napy84/U4pB7/2/希望有幫助!
在每個輸入標簽中使用屬性“title”並在其上寫一條消息
只需要獲取元素並使用 setCustomValidity 方法即可。
例子
var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');
你可以簡單地使用oninvalid="屬性,綁定this.setCustomValidity()事件監聽器!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oninvalid</title> </head> <body> <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" > <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)"> <input type="submit" value="Submit"> </form> </body> </html>
http://caniuse.com/#feat=form-validation
https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation
您可以添加此腳本來顯示您自己的消息。
<script>
input = document.getElementById("topicName");
input.addEventListener('invalid', function (e) {
if(input.validity.valueMissing)
{
e.target.setCustomValidity("Please enter topic name");
}
//To Remove the sticky error message at end write
input.addEventListener('input', function (e) {
e.target.setCustomValidity('');
});
});
</script>
對於其他驗證,如模式不匹配,您可以添加額外的 if else 條件
像
else if (input.validity.patternMismatch)
{
e.target.setCustomValidity("Your Message");
}
還有其他有效性條件,如 rangeOverflow、rangeUnderflow、stepMismatch、typeMismatch、valid
在 onvalid 屬性上使用它,如下所示
oninvalid="this.setCustomValidity('Special Characters are not allowed')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.