设置自定义HTML5必填字段验证消息 [英] Set custom HTML5 required field validation message
问题描述
必需的字段自定义验证
我有一个包含许多输入字段的表单。我已经把html5验证过了
< input type =textname =topicNameid =topicNamerequired /> ;
当我提交表单而未填写此文本框时，它会显示默认消息，如
请填写此字段
任何人都可以帮我编辑这个消息吗？
我有一个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（请输入房间主题标题）;
}
};
elements [i] .oninput = function（e）{
e .target.setCustomValidity（）;
};
}
}）
电子邮件自定义验证
我有以下的HTML表单
< form id =myform>
< input id =emailname =emailtype =email/>
< input type =submit/>
< / form>
验证邮件我想要。
必填字段：请输入电子邮件地址
错误的电子邮件地址：'testing @ .com'不是有效的电子邮件地址。 （这里，输入的电子邮件地址显示在文本框中）
我已经试过了。
函数检查（输入）{
if（input.validity.typeMismatch）{
input.setCustomValidity（'+ input.value +'is not一个有效的电子邮件地址。）;
}
else {
input.setCustomValidity（）;
$ b $ p
$ b 这个功能工作不正常，你有没有其他方式来做到这一点？这将是值得赞赏的。
解决方案
代码片段
得到了很多关注，这是一个很好的可配置片段，我想出了：
/ **
* @author ComFreek< https：//stackoverflow.com/users/603003/comfreek>
* @link https://stackoverflow.com/a/16069817/603003
* @license MIT 2013-2015 ComFreek
* @license [双授权] CC BY-SA 3.0 2013- 2015 ComFreek
*您必须保留此许可证标题！
* /
（函数（exports）{
函数valOrFunction（val，ctx，args）{
if（typeof val ==function）{
return val.apply（ctx，args）;
} else {
return val;
}
}
函数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（）;
}
}
函数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 =emailtype =emailrequired =required/>
InvalidInputHelper（document.getElementById （email），{
defaultText：请输入一个电子邮件地址！，
emptyText：请输入一个电子邮件地址！，
invalidText ：function（input）{
return'电子邮件地址''+ input.value +'无效！';
}
}）;
更多详情
-
defaultText当输入显示时，会显示
-
emptyText是空的（被清除）当浏览器将输入标记为无效时（例如，当它不是一个）时显示
-
invalidText有效的电子邮件地址）
最初显示
您可以为这三个属性分别指定一个字符串或函数。
如果您指定一个函数，它可以接受对输入元素（DOM节点）的引用，并且它必须返回一个字符串，然后将其显示为错误消息。 / p>
兼容性
测试： 你可以在这里看到旧版本：https://stackoverflow.com/revisions/16069817/6 I have one form with many input fields. I have put html5 validations when I submit the form without filling this textbox it shows default message like Can anyone please help me to edit this message? I have a javascript code to edit it, but it's not working I have following HTML form Required field: Please Enter Email Address I have tried this. This function is not working properly, Do you have any other way to do this? It would be appreciated. Since this answer got very much attention, here is a nice configurable snippet I came up with:
→ jsFiddle
You can either assign a string or a function to each of the three properties. Tested in: You can see the old revision here: https://stackoverflow.com/revisions/16069817/6 这篇关于设置自定义HTML5必填字段验证消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
旧回答
Required field custom validation
<input type="text" name="topicName" id="topicName" required />
"Please fill out this field"$(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("");
};
}
})
Email custom validations
<form id="myform">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Validation messages I want like.
Wrong Email: 'testing@.com' is not a Valid Email Address. (here, entered email address displayed in textbox)function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");
}
else {
input.setCustomValidity("");
}
}
Code snippet
/**
* @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);
Usage
<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!';
}
});
More details
defaultText is displayed initiallyemptyText is displayed when the input is empty (was cleared)invalidText is displayed when the input is marked as invalid by the browser (for example when it's not a valid email address)
If you assign a function, it can accept a reference to the input element (DOM node) and it must return a string which is then displayed as the error message.Compatibility
Old answer
