设置自定义HTML5必填字段验证消息
设置自定义HTML5必填字段验证消息
提问于 2012-12-10 17:38:40
必填字段自定义验证
我有一个带有许多输入字段的表单。我已经将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("");
}
} 此功能无法正常工作，您是否有其他方法可以解决此问题？我将不胜感激。
回答 11
Stack Overflow用户
回答已采纳
发布于 2013-04-18 04:37:15
代码片段
由于这个答案非常受关注，下面是我想出的一个很好的可配置代码片段：
/**
* @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输入为空时显示initiallyemptyText(当输入被浏览器标记为无效时(例如，当输入不是有效的电子邮件地址时)显示was cleared)invalidText)
您可以将字符串或函数分配给这三个属性中的每一个。
如果您指定一个函数，它可以接受对输入元素(DOM节点)的引用，并且它必须返回一个字符串，然后将该字符串显示为错误消息。
兼容性
测试时间：
- Chrome Canary 47.0.2
- IE 11
- Microsoft Edge (使用28/08/2015)
- Firefox 40.0.3
- Opera 31.0
的最新版本
老答案
你可以在这里看到旧的版本：https://stackoverflow.com/revisions/16069817/6
Stack Overflow用户
发布于 2015-07-03 19:23:54
您可以简单地使用oninvalid属性来实现这一点，请查看此演示代码
<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/>
<input type="submit"/>
</form>
Stack Overflow用户
发布于 2014-03-10 01:58:15
HTML：
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>JAVASCRIPT :
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;
}演示:
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13798313
复制相关文章
相似问题