需要 html5 和 jQuery submit()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11381369/
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
html5 required and jQuery submit()
提问by Dan Stern
I'm trying to implement html5 into a form, but I came with a problem when I submit the form through jquery and try to use the html5 "required" attribute.
我正在尝试将 html5 实现到表单中，但是当我通过 jquery 提交表单并尝试使用 html5“必需”属性时遇到了问题。
Here is my form, quite simple:
这是我的表格，很简单：
<form action="index.php" id="loginform">
<input name="username" required placeholder="username" type="text">
<a href="javascript:$('#loginform').submit();">Login</a>
</form>
The problem is that when the form is submited through jquery, It just by-passes the required attribute. I know that required should only work if the form is submitted by the user, not by a script, so when I change the anchor to a submit input it works perfect.
问题是当表单通过 jquery 提交时，它只是绕过了 required 属性。我知道 required 应该只在表单由用户提交时才有效，而不是由脚本提交，所以当我将锚点更改为提交输入时，它工作得很好。
My point is if there is a way to force the jquery .submit() to use html5 required atribute.
我的观点是是否有办法强制 jquery .submit() 使用 html5 所需的属性。
Thanks in advance for the answers
预先感谢您的回答
回答by iBet7o
I did the following
我做了以下
<form>
...
<button type="submit" class="hide"></button>
</form>
<script>
...
$(...).find('[type="submit"]').trigger('click');
...
</script>
?it works!
？有用！
回答by pozs
You can
你可以
- trigger
clickevent on a submit - check validation manually with
$("form")[0].checkValidity() - find invalid elements manually using
$("form :invalid")
click提交时触发事件- 手动检查验证
$("form")[0].checkValidity() - 使用手动查找无效元素
$("form :invalid")
回答by Raab
You are right. HTML5 validation works only when submit is triggered by user. this is how it is. :(
你是对的。HTML5 验证仅在用户触发提交时才有效。事情就是这样。:(
you need write a your own custom method on submit. OR there is a good plugin you can use which validates fields according html5 attributes.
您需要在提交时编写自己的自定义方法。或者有一个很好的插件，您可以使用它根据 html5 属性验证字段。
回答by AdamJones
I had exactly the same problem. I had a single button that I had deliberately set NOT to be a submit because it was on first click revealing a form. On a second click of the same button $('form[name=xxx]').submit(); was firing and I found as well that the HTML5 validation doesn't work.
我遇到了完全相同的问题。我有一个按钮，我故意将其设置为不提交，因为它是在第一次单击时显示表单。再次单击同一个按钮 $('form[name=xxx]').submit(); 正在触发，我也发现 HTML5 验证不起作用。
My trick was to add a line of code so that after my first click of this button occurs I change its type to submit dynamically.
我的技巧是添加一行代码，以便在我第一次单击此按钮后更改其类型以动态提交。
$("#btn").attr("type","submit");
Which worked like a charm!
这就像一个魅力！
回答by Volodymyr
Answer from https://stackoverflow.com/a/30124479/7915308
来自https://stackoverflow.com/a/30124479/7915308 的回答
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>
</body>
</html>回答by gregtheitroadeskazy
Here an exemple of my personnal solution:
这是我个人解决方案的一个例子：
var form = $('#loginform');
// Trigger HTML5 validity.
var reportValidity = form[0].reportValidity();
// Then submit if form is OK.
if(reportValidity){
form.submit();
}
回答by Stano
Here are some examples, how to validate html5:
以下是一些示例，如何验证 html5：
function validateForm(form) {
if (form.username.value=='') {
alert('Username missing');
return false;
}
return true;
}
<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();">
<input name="username" placeholder="username" required="required" type="text" />
<a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a>
<a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a>
<input name="send" type="submit" value="Login3" />
<input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" />
</form>
Full code here. One thing here is strange: $(document.forms.loginform).submit(); works fine, but document.forms.loginform.submit(); fails. Can somebody explain why?
完整代码在这里。这里有一件事很奇怪： $(document.forms.loginform).submit(); 工作正常，但 document.forms.loginform.submit(); 失败。有人可以解释为什么吗？
回答by Conner
You could call a function instead and use that function to check if all the nodes with the required attribute have a value.
您可以改为调用一个函数并使用该函数来检查是否所有具有所需属性的节点都具有值。
There are some plugins available to do this: http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery
有一些插件可以做到这一点：http: //thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery
回答by Tats_innit
Working demohttp://jsfiddle.net/3gFmC/
工作演示http://jsfiddle.net/3gFmC/
Hope this will help :)
希望这会有所帮助 :)
code
代码
$('#btn_submit').bind('click', function() {
$('input:text[required]').parent().show();
// do whatever;
});
?
?
