Javascript onclick 函数停止工作所需的 HTML5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28459708/
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
Javascript onclick function stops HTML5 required from working
提问by Emc_tgn15
Good day,
再会，
I am working on a form where all my text fields have a required attribute; I noticed that when i clicked on submit required attribute does not show a pop up to validate if a field is empty.
我正在处理一个表单，其中我的所有文本字段都有一个必需的属性；我注意到当我点击提交所需的属性时，没有显示一个弹出窗口来验证一个字段是否为空。
I have two submit buttons on my page both using an onclick submitform function; One opens up a new tab and the other submits the form and goes to a new page.
我的页面上有两个提交按钮，都使用 onclick 提交表单功能；一个打开一个新选项卡，另一个提交表单并转到一个新页面。
For debugging purposes i remove the button that opens up a new tab and remove the onclick attribute on my second button and it work; I have been googling all day but i cannot seem to find the same scenario i have at the moment.
出于调试目的，我删除了打开新选项卡的按钮，并删除了第二个按钮上的 onclick 属性，它可以工作；我一整天都在谷歌上搜索，但我似乎无法找到与目前相同的场景。
I believe it has to do with my JS but i am not sure what to add or remove on my code; Please see my code below.
我相信这与我的 JS 有关，但我不确定在我的代码中添加或删除什么；请在下面查看我的代码。
JavaScript
JavaScript
function submitForm(action,newtab)
{
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
HTML
HTML
<form id="add2" action="add5.php" method="post">
<input placeholder="First Name" tabindex="1"
name="fname" maxlength="128" size="30" required>
<input placeholder="Last Name" tabindex="12"
name="lname" maxlength="128" size="30" required>
<button tabindex="3" value="Save"
name="save" onclick="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onclick="submitForm('add5.php',0);"
type="submit">Save Details</button>
</form>
I have a button attribute but i have set it to type="submit" and i am pretty much sure that works as i have already tested it when i removed the onclick functions; My question is can i required attribute worked without removing the onclick function of JavaScript?
我有一个按钮属性，但我已将其设置为 type="submit" 并且我非常确定它可以工作，因为我在删除 onclick 功能时已经对其进行了测试；我的问题是我可以在不删除 JavaScript 的 onclick 函数的情况下使用必需的属性吗？
Any help is much appreciated.
任何帮助深表感谢。
回答by Emc_tgn15
I found the answer to my question, The problem is that i was binding onClick method to the submit. The onClick will trigger first which results in it getting past the validator.
我找到了我的问题的答案，问题是我将 onClick 方法绑定到提交。onClick 将首先触发，导致它通过验证器。
Solution is i change the onClick to onSubmit on my HTML code.
解决方案是我将 HTML 代码上的 onClick 更改为 onSubmit。
<button tabindex="3" value="Save"
name="save" onsubmit="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onsubmit="submitForm('add5.php',0);"
type="submit">Save Details</button>
回答by Heath
You just need to use the "checkValidity()" method on the form before submitting in your onclick function like this:
您只需要在表单上使用“checkValidity()”方法，然后再像这样提交 onclick 函数：
if($("#add2").checkValidity()) {
document.getElementById('add2').submit();
}
See this fiddle: http://jsfiddle.net/36uv2e52/33/
看到这个小提琴：http: //jsfiddle.net/36uv2e52/33/
回答by SRing
Rather than using requiredyou can simply check the values before you submit.
required您可以在提交之前简单地检查值而不是使用。
function submitForm(action,newtab) {
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
if (fname == "" || lname == "") {
alert("First and last name are required");
exit;
} else {
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
}
