Html 如何从 JavaScript 函数手动显示 HTML5 验证消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17550317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manually show a HTML5 validation message from a JavaScript function?
提问by Ahmad
I want to know if there is any way to programatically show a HTML5 validation error, using a JavaScript function.
我想知道是否有任何方法可以使用 JavaScript 函数以编程方式显示 HTML5 验证错误。
This is useful for scenarios where email duplication has to be checked. For example, a person enters an email, presses the Submit button, and then has to be notified that this email is already registered or something.
这对于必须检查电子邮件重复的场景很有用。例如，一个人输入一封电子邮件，按下提交按钮，然后必须通知该电子邮件已被注册或其他什么。
I know there are other ways of showing such an error, but I wanted to display it in the same way as how the validation error messages are shown (e.g. invalid email, empty field, etc.).
我知道还有其他方法可以显示此类错误，但我想以与显示验证错误消息的方式相同的方式显示它（例如，无效的电子邮件、空字段等）。
JSFiddle:http://jsfiddle.net/ahmadka/tjXG3/
JSFiddle：http : //jsfiddle.net/ahmadka/tjXG3/
HTML Form:
HTML 表单：
<form>
<input type="email" id="email" placeholder="Enter your email here..." required>
<button type="submit">Submit</button>
</form>
<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>
JavaScript:
JavaScript：
function triggerCustomMsg()
{
document.getElementById("email").setCustomValidity("This email is already used");
}
The above code sets the custom message, but its not automatically shown. It's only shown when the person presses the submit button or something.
上面的代码设置了自定义消息，但不会自动显示。它仅在用户按下提交按钮或其他东西时显示。
回答by Diego
You can now use the HTMLFormElement.reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibilityat MDN). It reports validity errors without triggering the submit event and they are shown in the same way.
您现在可以使用 HTMLFormElement.reportValidity() 方法，目前它已在除 Internet Explorer 之外的大多数浏览器中实现（请参阅MDN 上的浏览器兼容性）。它在不触发提交事件的情况下报告有效性错误，它们以相同的方式显示。
回答by Ryan Holdren
This question was asked over a year ago, but it's a good question that I recently encountered as well...
这个问题是一年多前提出的，但这是我最近遇到的一个好问题......
My solution was to use JavaScript to create an attribute (I went with "data-invalid") on the <label>of each <input>, <select>and <textarea>containing the validationMessage.
我的解决方案是使用 JavaScript 在<label>each上创建一个属性（我使用“data-invalid”）<input>，<select>并<textarea>包含validationMessage。
Then some CSS...
然后一些CSS...
label:after {
content: attr(data-invalid);
...
}
... displays the error message.
... 显示错误消息。
Limitations
限制
This only works provided each element has a label. It will not work if you put the attribute on the element itself, because <input>elements cannot have :afterpseudo elements.
这只适用于每个元素都有一个标签。如果将属性放在元素本身上，它将不起作用，因为<input>元素不能具有:after伪元素。
Demo
演示
回答by Tobias Buschor
As mentoned by @Diego you can use form.reportValidity();
To support IE and Safari include this polyfill, it just works:
正如@Diego 所提到的，您可以使用 form.reportValidity();
为了支持 IE 和 Safari 包含这个 polyfill，它可以正常工作：
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = function() {
if (this.checkValidity()) return true;
var btn = document.createElement('button');
this.appendChild(btn);
btn.click();
this.removeChild(btn);
return false;
}
}
回答by Lalnuntluanga Chhakchhuak
var applicationForm = document.getElementById("applicationForm");
if (applicationForm.checkValidity()) {
applicationForm.submit();
} else {
applicationForm.reportValidity();
}
reportValidity() method will trigger HTML5 validation message.
reportValidity() 方法将触发 HTML5 验证消息。
