任何知道如何在不使用提交按钮的情况下在表单中触发标准 HTML5 验证的人？（JavaScript 或 jQuery）。
我不希望发送POST/GET的请求，只能做验证。
在不使用提交按钮的情况下触发标准的 HTML5 验证（表单）？
IT技术
javascript
jquery
forms
html
2021-02-04 08:54:02
6个回答
经过一番研究，我想出了以下代码，应该可以回答您的问题。（至少它对我有用）
首先使用这段代码。在$(document).ready确保当表单加载到DOM中被执行的代码：
$(document).ready(function()
{
$('#theIdOfMyForm').submit(function(event){
if(!this.checkValidity())
{
event.preventDefault();
}
});
});
然后只需调用$('#theIdOfMyForm').submit();您的代码。
更新
如果您确实想显示用户在表单中的哪个字段出错，请在后面添加以下代码 event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
它将关注第一个无效输入。
您可以使用reportValidity，但是它的浏览器支持还很差。它适用于 Chrome、Opera 和 Firefox，但不适用于 IE、Edge 或 Safari：
var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
if (myform.reportValidity) {
myform.reportValidity();
} else {
//warn IE users somehow
}
}
（checkValidity有更好的支持，但不适用于 IE<10。）
这个问题的公认答案似乎是您正在寻找的。
简短摘要：在提交的事件处理程序中，调用event.preventDefault().
您必须提交表单才能使 html5 验证工作。有一种方法可以解决它来获得您想要的东西。看代码：
<body>
<h1>Validation Example</h1><br />
<h2>Insert just 1 digit<h2>
<form id="form" onsubmit="return false">
<label>Input<input type="text" pattern="[0-9]" id="input" /></label>
<input type="submit" class="hide" id="inputButton">
</form>
</body>
在此处查看示例
注意：使用 form.submit() 对我不起作用。所以我创建了一个隐藏的提交按钮，它在 keyup 上触发。不要问我为什么。也许有人可以澄清它。
这是我对@mhm 建议的解决方案的实现，在那里我放弃了 jQuery 的使用。
变量 formId 包含表单的 id，而 msg 是一个包含我的应用程序消息的对象。
此实现尝试使用本机 HTML 5 错误消息通知用户，如果不可能，则警告通用表单错误消息。
如果没有错误，我提交表单。
let applyForm = document.getElementById(formId);
if (!applyForm.checkValidity()) {
if (applyForm.reportValidity) {
applyForm.reportValidity();
} else {
alert(msg.ieErrorForm);
}
} else {
applyForm.submit();
}