HTML5 通过 onsubmit 属性提交表单时模式验证不起作用
HTML5 Pattern Validation not working when submitting form through onsubmit attribute
我正在尝试通过 onsubmit 属性提交表单。但我希望 HTML5
验证也能正常工作。
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>
但是即使没有给出任何值,表单也会被提交。
我
你输入的pattern属性是正则表达式,你可以手动提取
const patternToMatch = $("input[type="text"]).attr("pattern");
然后实例化它:
const regexp = new RegExp(patternToMatch);
最终确保输入在提交之前尊重它
function submitForm() {
if ($("input[type="text"]).val().match(regexp)) {
form.submit();
} else {
// display message
}
}
这是盲编码,如果它不起作用请告诉我:)
当使用 JQuery 执行提交时,它不会查看 HTML 的验证,它只会绕过它。然而,有一种方法可以做到这一点,如下所示。所以我在这里做的是。首先,为了保持简单而不是在加载页面时触发提交,我使用 submitForm() 函数创建了一个 link。我还创建了一个不可见的提交按钮。然后在 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>
如果输入与模式
不匹配,则以下代码不应调用"submit"
<form action="search" method="post" id="form">
<input type="text" pattern="[A-Za-z]" required title="1 letter only">
</form>
var form = $("#form");
form.on("submit", function(e){
e.preventDefault();
alert('Submitted')
});
在这里 fiddle 工作:https://jsfiddle.net/lightblue/94wj7cnb/1/
对于模式:
[a-zA-Z]
以小写和大写形式匹配 A–Z 中的一个字母。
[a-zA-Z]+
匹配一个或多个字母(一个词)
在你的情况下,它只会匹配 1 个字母
我正在尝试通过 onsubmit 属性提交表单。但我希望 HTML5
验证也能正常工作。
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>
但是即使没有给出任何值,表单也会被提交。 我
你输入的pattern属性是正则表达式,你可以手动提取
const patternToMatch = $("input[type="text"]).attr("pattern");
然后实例化它:
const regexp = new RegExp(patternToMatch);
最终确保输入在提交之前尊重它
function submitForm() {
if ($("input[type="text"]).val().match(regexp)) {
form.submit();
} else {
// display message
}
}
这是盲编码,如果它不起作用请告诉我:)
当使用 JQuery 执行提交时,它不会查看 HTML 的验证,它只会绕过它。然而,有一种方法可以做到这一点,如下所示。所以我在这里做的是。首先,为了保持简单而不是在加载页面时触发提交,我使用 submitForm() 函数创建了一个 link。我还创建了一个不可见的提交按钮。然后在 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>
如果输入与模式
不匹配,则以下代码不应调用"submit"<form action="search" method="post" id="form">
<input type="text" pattern="[A-Za-z]" required title="1 letter only">
</form>
var form = $("#form");
form.on("submit", function(e){
e.preventDefault();
alert('Submitted')
});
在这里 fiddle 工作:https://jsfiddle.net/lightblue/94wj7cnb/1/
对于模式:
[a-zA-Z]
以小写和大写形式匹配 A–Z 中的一个字母。[a-zA-Z]+
匹配一个或多个字母(一个词)
在你的情况下,它只会匹配 1 个字母