提问人：Rees 提问时间：4/17/2011 最后编辑：TylerHRees 更新时间：11/3/2023 访问量：46151
当所有HTML表单元素都经过验证时，如何取消表单操作并执行jQuery？
How can I void a form action and execute jQuery when all HTML form elements are validated?
问：
我有一个简单的 HTML 表单，我想利用它来进行所需的字段验证。我的问题是我想使用 HTML5 表单验证，但同时避免实际提交表单，因为我想执行 jQuery Ajax 调用。我知道您可以禁用 html5 验证，但我想将其保留为表单验证的主要方法，而不是 jQuery 插件。
有什么想法吗？
[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");
}
}
});
});
});
答：
57赞
Milimetric
4/17/2011
#1
根据这个：有没有浏览器支持 HTML5 的 checkValidity（） 方法？，这可能不是最新的事实，因为 HTML5 是一个正在进行的工作，应该允许你从 JavaScript 访问验证信息。假设这是真的，你的jQuery需要将自身附加到表单提交并利用它：Form.checkValidity()element.validity.valid
$('#membershipform').submit(function(event){
// cancels the form submission
event.preventDefault();
// do whatever you want here
});
评论
0赞
Marcel Gruber
3/27/2015
致所有读者：确保在函数中包含 event 参数，否则这在 Firefox 中不起作用。
1赞
Milimetric
3/27/2015
@Max，您的意思是确保将参数传递给回调函数吗？如果是这样，是的，这肯定是所有浏览器中都需要的，因为您无法以其他方式调用。eventpreventDefault
0赞
Marcel Gruber
3/27/2015
是的。只是提醒一下。我浪费了很多时间试图弄清楚为什么它在仅使用示例的其余部分而不是其余部分后不起作用。即使没有该参数，它似乎仍然在 Chrome 上按预期运行，但在 Firefox 上却没有。event.preventDefault();event
1赞
Milimetric
3/27/2015
@Max - 您可能拥有的是 Chrome 会自动具有一些自动验证行为，这些行为也会阻止提交表单。因此，根本不需要此代码，但如果您在没有定义的情况下使用它，则会在控制台上抛出错误。因此，请确保保持该控制台处于打开状态。在外面注意安全！:)event.preventDefault()event
4赞
Darm
8/10/2011
#2
用：
$('#membershipform').submit(function(){
// do whatever you want here
return false;
});
评论
3赞
Stan
1/11/2013
如果 return 语句上方的代码引发错误，则此操作将不起作用。如果出现错误，表单仍会转到“action”属性中指定的地址。
0赞
Sando K
1/10/2016
是的！如果我希望我的表单通过验证部分但不提交，这有效。干得好
1赞
Chirag
12/7/2016
#3
使用纯 java 脚本
<script>
document.getElementById('membershipform')
.addEventListener("submit",
function(event) {
event.preventDefault();
// write stuff
});
</script>
4赞
benbyford
9/21/2017
#4
这是对默认行为和 javascript 的微妙利用，以创建您想要的内容。
var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
console.log("valid");
e.preventDefault();
}else{
console.log("not valid");
return;
}
如果表单有效，则 preventDefault（） 并继续使用您的函数（例如，通过 ajax 发送）。 如果无效，则返回而不阻止默认值，您应该会发现表单验证的默认操作发生在表单输入上。
评论
0赞
Vini
9/9/2019
这对我有用。它帮助我检查所有输入字段是否有效。我没有使用 ，而是将存储表单的代码放在语句中。e.preventDefault();if
14赞
Eduardo Antón
10/30/2019
#5
您可以从 javascript 使用 html5 表单验证，仅调用 reportValidity（） 方法
在您的示例中：
<script>
document.querySelector('#membershipform').reportValidity()
</script>
reportValidity 运行 html5 表单验证并返回 true/false。
评论
0赞
U. Windl
11/3/2023
这个答案将受益于进一步的细节：如何处理返回值，以及将此元素放在哪里？
0赞
U. Windl
11/3/2023
#6
作为 HTML/JavaScript：在按下按钮时执行表单提交检查; 有可能以一种优雅的方式吗？ 由于是 How can void a form action and execute jQuery when all HTML form elements are validated？，我无法在那里添加答案而关闭。
因此，我在这里添加我的解决方案：
我用过
if (!document.forms[0].reportValidity())
return; // invalid input, ignore button
在 by handler 的开头（我的文档只有一个表单）。
Firefox 会弹出所有不正确输入字段的提示，因此处理程序不必处理这些提示。
因此，我只是在输入无效时忽略按钮按下。onClick
评论