设置自定义HTML5必填字段验证消息
必填字段自定义验证
我有一种表单,其中包含许多输入字段。我已经进行了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>
我想要的验证消息。
请输入电子邮件地址
‘testing @ .com’不是有效的电子邮件地址。( 在这里,输入的电子邮件地址显示在文本框中 )
我已经试过了。
function check(input) { if(input.validity.typeMismatch){
input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");
}
else {
input.setCustomValidity("");
}
}
此功能无法正常工作,您还有其他方法可以执行此操作吗?将不胜感激。
回答:
程式码片段
由于这个答案引起了广泛关注,因此我想到了一个不错的可配置代码段:
/** * @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);
用法
<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节点)的引用,并且 必须 返回一个字符串,该字符串随后将显示为错误消息。
回答:
经过测试:
- Chrome Canar47.0.2
- IE 11
- Microsoft Edge(使用截至2015年8月28日的最新版本)
- Firefox 40.0.3
- Opera31.0
以上是 设置自定义HTML5必填字段验证消息 的全部内容, 来源链接: utcz.com/qa/413999.html