我试图使用div,HTML5,JavaScript提交内容。如果我使用提交按钮验证器(输入中的必需属性)工作按钮不提交信息。但是,如果我使用div标签,它不会验证并发送信息。有什么办法解决吗?或者我应该使用整个代码来验证信息并停止提交吗?
http://www.dropmocks.com/mCyfGJ
我使用以下代码。 Javascript提交: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
HTML
在这里输入代码
<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>
答案 0 :(得分:1)
如果您通过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>