我正在尝试通过 onsubmit 属性提交表单。但我希望 HTML 验证也能正常工作。
function submitForm() {
if(somecondition){
//used this to submit form without it I was not able to submit the form
$("form#form").submit();
return true;
}
else{
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form" onsubmit="return submitForm()">
<input type="text" pattern="[A-Za-z]" required>
</form>
但即使没有给出任何值,表单也会提交。
最佳答案
当使用 JQuery 进行提交时,它不会查看 HTML 的验证,而是会绕过它。然而,有一种方法可以做到这一点,如下所示。所以我在这里做的是。首先,为了保持简单,而不是在加载页面时触发提交,我创建了一个带有submitForm()函数的链接。我还创建了一个不可见的提交按钮。然后在submitForm()函数中,您可以找到隐藏的按钮并触发单击事件,该事件将触发按钮的提交并验证您的HTML。
这样您就可以使用 JQuery 来触发提交并编写 JQuery 中您需要的任何其他代码。
编辑:更改了代码片段,以便在验证时仍然使用submit() JQuery 函数。
function submitForm(){
// do some stuff
if ($('#form')[0].checkValidity()) {
$('#form').submit();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form">
<input type="text" id="warning" required>
<a href="javascript: void(0);" onclick="submitForm()">Login</a>
</form>
关于javascript - 通过 onsubmit 属性提交表单时 HTML5 模式验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55039024/