html5 表单验证、无效表单操作并在所有 html5 表单元素都经过验证时执行 jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5688122/
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 form validation, void form action and execute jQuery when all html5 form elements are validated?
提问by Rees
I have a simple HTML5 form that I want to leverage for required field validation. My issue is that I want to use the HTML5 form validation BUT at the same time avoid actually submitting the form because I want to execute a jQuery ajax call instead. I know you can disable html5 validation, but I want to keep this as my primary method of form validation instead of a jQuery plugin.
我有一个简单的 HTML5 表单，我想利用它进行必填字段验证。我的问题是我想使用 HTML5 表单验证，但同时避免实际提交表单，因为我想执行 jQuery ajax 调用。我知道您可以禁用 html5 验证，但我想将此作为我的主要表单验证方法而不是 jQuery 插件。
Any thoughts?
有什么想法吗？
HTML
HTML
<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
<input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
<input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>
<input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
<p>
<input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
</p>
</form>
JAVASCRIPT:
爪哇脚本：
$(function(){
$("#submitbtn").click(function(){
$.ajax({
url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
success:
function(txt){
if(txt){
$("#thankyou").slideDown("slow");
}
}
});
});
});
回答by Milimetric
According to this: Do any browsers yet support HTML5's checkValidity() method?, and this may not be the latest truth since HTML5 is a work in progress, the Form.checkValidity()and element.validity.validshould let you access validation information from JavaScript. Assuming that's true, your jQuery would need to attach itself to the form submit and make use of that:
据此：是否有任何浏览器支持 HTML5 的 checkValidity() 方法？，这可能不是最新的事实，因为 HTML5 正在进行中，Form.checkValidity()并且element.validity.valid应该让您从 JavaScript 访问验证信息。假设这是真的，您的 jQuery 需要将自身附加到表单提交并使用它：
$('#membershipform').submit(function(event){
// cancels the form submission
event.preventDefault();
// do whatever you want here
});
回答by Eduardo Antón
You can use html5 form validation from javascript, only call to method reportValidity()
您可以从 javascript 使用 html5 表单验证，只调用方法reportValidity()
In your example:
在你的例子中：
<script>
document.querySelector('#membershipform').reportValidity()
</script>
reportValidity run html5 form validation and return true/false.
reportValidity 运行 html5 表单验证并返回 true/false。
回答by Darm
Use:
用：
$('#membershipform').submit(function(){
// do whatever you want here
return false;
});
回答by benbyford
This is a subtle leverage of default behaviour and javascript to create what you want.
这是默认行为和 javascript 的微妙杠杆作用来创建您想要的。
var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
console.log("valid");
e.preventDefault();
}else{
console.log("not valid");
return;
}
If the form is valid then preventDefault() and continue with your function (e.g. send over ajax). If not valid then return without preventing default, you should find the default actions for form validation occurs on your form inputs.
如果表单有效，则 preventDefault() 并继续执行您的功能（例如通过 ajax 发送）。如果无效，则返回而不阻止默认值，您应该发现表单验证的默认操作发生在您的表单输入上。
回答by Chirag
Using pure java script
使用纯java脚本
<script>
document.getElementById('membershipform')
.addEventListener("submit",
function(event) {
event.preventDefault();
// write stuff
});
</script>
