设置自定义HTML5必填字段validation消息
必填字段自定义validation
我有一个有很多input字段的表单。 我已经把html5validation
<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(""); }; } })
电子邮件自定义validation
我有以下HTML表单
<form id="myform"> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
validation消息，我想要的。
必填字段：请input电子邮件地址
错误的电子邮件： “testing@ .com”不是有效的电子邮件地址。 （ 在这里，input的电子邮件地址显示在文本框中 ）
我已经试过了。
function check(input) { if(input.validity.typeMismatch){ input.setCustomValidity("'" + input.value + "' is not a Valid Email Address."); } else { input.setCustomValidity(""); } }
这个function工作不正常，你有其他的方法吗？ 这将不胜感激。
代码片段
由于这个答案非常重视，下面是一个很好的可configuration的代码片断：
/** * @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最初显示 - 当input为空时清空
emptyText（被清除） - 当浏览器将input标记为无效时，会显示
invalidText（例如，当它不是有效的电子邮件地址时）
您可以为这三个属性中的每一个分配一个string或一个函数。
如果您分配了一个函数，它可以接受对input元素（DOM节点）的引用，并且它必须返回一个string，然后显示为错误消息。
兼容性
经testing：
- 铬金丝雀47.0.2
- IE 11
- Microsoft Edge（使用截至2015年8月28日的最新版本）
- Firefox 40.0.3
- Opera 31.0
老答案
你可以在这里看到旧版本： https : //stackoverflow.com/revisions/16069817/6
你可以使用oninvalid属性简单地实现这一点，检查这个演示代码
<form> <input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/> <input type="submit"/> </form>
尝试这个：
$(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中testing了这个function，并在两个浏览器中都能正常工作。
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; }
演示：
人，我从来没有在HTML 5中做过，但我会尝试。 看看这个小提琴。
我已经使用了一些jQuery，HTML5本地事件和属性以及input标签上的自定义属性（如果您尝试validation代码，这可能会导致问题）。 我没有在所有浏览器中进行testing，但我认为它可能工作。
这是使用jQuery的字段validationJavaScript代码：
$(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为你做。 那个正则expression式似乎没问题（至less它阻止了你的testing@.com ！哈哈）
正如你可以在小提琴上看到的，我对提交表单事件做了额外的validation（ 这也在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."); } } } } });
和我正在使用它的forms（截断）：
<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>
你可以在相同types的所有input中设置一个“invalid”的事件监听器，或者根据需要设置一个事件监听器，然后设置正确的消息。
[].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); });
脚本的第二部分，有效性信息将被重置，否则将无法提交表单：例如，即使电子邮件地址已更正，也会阻止邮件被触发。
另外，您不必根据需要设置input字段，因为一旦您开始在input中input，就会触发“无效”。
这是一个小提琴： http : //jsfiddle.net/napy84/U4pB7/2/希望帮助！
只需要获取元素并使用setCustomValidity方法即可。
例
var foo = document.getElementById('foo'); foo.setCustomValidity(' An error occurred');
在每个input标签中使用属性“title”并在其上写入一条消息
你可以简单地使用oninvalid =“属性，并绑定this.setCustomValidity（） eventListener！
这里是我的演示代码！（你可以运行它来检查！） 
<!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>
你可以添加这个脚本来显示你自己的消息。
<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>
对于其他validation，如模式不匹配，你可以添加附加条件
喜欢
else if (input.validity.patternMismatch) { e.target.setCustomValidity("Your Message"); }
还有其他有效的条件，如rangeOverflow，rangeUnderflow，stepMismatch，typeMismatch，有效
