设置自定义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

回到顶部