javascript 使用javascript提交表单并需要输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21082674/
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
Form submit with javascript and input required
提问by nanoalvarez
I was trying to submit things using a div, HTML5, JavaScript. If I use a submit button the validator (required attribute in the inputs) works the button doesn't submit info. But if I use a div tag it doesn't validate and send the info. Any way to fix it? Or should I do the whole code to validate the info and stop the submit?
我试图使用 div、HTML5、JavaScript 提交内容。如果我使用提交按钮，验证器（输入中的必需属性）将起作用，按钮不会提交信息。但是如果我使用 div 标签，它不会验证并发送信息。有什么办法可以解决吗？或者我应该执行整个代码来验证信息并停止提交？
http://www.dropmocks.com/mCyfGJ
http://www.dropmocks.com/mCyfGJ
Im using the following code. Javascript submit: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
我使用以下代码。Javascript 提交：http: //www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
HTML
HTML
enter code here
在这里输入代码
<form action="index.php" method="get" name='myform'>
<ul>
<li class="row">
<label class="labels" for="username">Username</label>
<input type="text" id="txtUser" required>
</li>
<li class="row">
<label class="labels" for="password">Password</label>
<input type="password" id="txtPass" required>
</li>
<li id="row2">
<div class="button"><a href="javascript: submitform()">Submit</a></div>
<input type="submit">
</li>
</ul>
</form>
回答by cyberwombat
If you are submitting via JS then you need to call the form validation yourself. I don't see any issues in your post that would prevent the submit though (without validation). But here's a working example. Keep in mind that not all browsers support html5 validation.
如果您通过 JS 提交，那么您需要自己调用表单验证。我在您的帖子中没有看到任何会阻止提交的问题（未经验证）。但这是一个工作示例。请记住，并非所有浏览器都支持 html5 验证。
<!DOCTYPE html>
<html>
<body>
<form action="index.php" method="get" name='myform'>
<ul>
<li class="row">
<label class="labels" for="username">Username</label>
<input type="text" id="txtUser" name="sds" required>
</li>
<li class="row">
<label class="labels" for="password">Password</label>
<input type="password" id="txtPass" required>
</li>
<li id="row2">
<div class="button"><a href="" onclick="return submitform()">Submit</a></div>
<input type="submit">
</li>
</ul>
</form>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function submitform() {
// Get first form element
var $form = $('form')[0];
// Check if valid using HTML5 checkValidity() builtin function
if ($form.checkValidity()) {
console.log('valid');
$form.submit();
} else {
console.log('not valid');
}
return false;
};
</script>
</body>
</html>
