Mat*_*lff 71 javascript forms jquery html5
谁知道如何在不使用提交按钮的情况下触发表单中的标准HTML5验证？(JavaScript或jQuery).
我不希望发送POST/GET的请求,只能做验证.
Dra*_*obe 31
经过一些研究,我提出了以下代码,这些代码应该是您问题的答案.(至少它对我有用)
首先使用这段代码.在$(document).ready当表单加载到DOM可以确保被执行的代码:
$(document).ready(function()
{
$('#theIdOfMyForm').submit(function(event){
if(!this.checkValidity())
{
event.preventDefault();
}
});
});
然后只需调用$('#theIdOfMyForm').submit();您的代码即可.
UPDATE
如果您确实想要在表单中显示用户错误的字段,请在之后添加以下代码 event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
它将关注第一个无效输入.
小智 17
您可以使用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上工作.)
joh*_*011 11
您必须提交表单才能使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()对我不起作用.所以我创建了一个隐藏的提交按钮,在按键上触发.不要问我为什么.也许有人可以澄清一下.
这是我对@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();
}
| 归档时间： |
|
| 查看次数： |
106307 次 |
| 最近记录： |