gpt4 book ai didi

jquery - 远程验证导致重复提交

转载 作者:行者123 更新时间:2023-12-01 01:15:13 25 4
gpt4 key购买 nike

我在远程验证方面遇到问题,导致表单提交两次(并输入成功/错误处理程序两次)。最初是一个 ASP.NET MVC 应用程序,具有不显眼的验证和用于 AJAX 提交的 jQuery 表单,但我已经能够简化为以下内容:

remote.json

"true"

test.html

<!doctype html>
<title>test</title>

<form action="" method="post">
<input name="foo" type="text" value="foo">
<br>
<input name="bar" type="text" value="bar">
<br>
<input type="submit">
</form>

<script src="//code.jquery.com/jquery-2.0.3.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<script>
$("form").validate(
{
rules:
{
foo: { remote: { url: "remote.json" } },
bar: { required: true }
}
});

$("form").on("submit", function ()
{
console.log("entering the submit handler");

if ($(this).valid())
{
console.log("form is valid");
}
else
{
console.log("form is invalid");
}

return false;
});
</script>

当远程验证返回“true”时,这是控制台输出:

GET http://localhost/validation/remote.json?foo=foo 200 OK
entering the submit handler
form is valid
entering the submit handler
form is valid

当远程验证返回“false”时,这是控制台输出:

GET http://localhost/validation/remote.json?foo=foo 200 OK
entering the submit handler
form is valid

我在提交处理程序中做错了什么吗?它适用于所有其他形式(数十种)。或者这是库中的另一个错误(如果是,是否有解决方法)?

最佳答案

无论表单是否有效,您的外部提交处理程序都会触发,并且您的返回 false 也会阻止表单的常规提交,从而干扰插件的正常操作.

这就是为什么开发人员提供了特殊的回调处理程序,可以在点击时自动捕获提交事件。

$("form").validate({
rules: {
foo: {
remote: {
url: "remote.json"
}
},
bar: {
required: true
}
},
submitHandler: function(form) {
// form is valid - do stuff, ajax?
return false; // block the default form action if using ajax
},
invalidHandler: function(event, validator) {
// form is invalid - do stuff
}
});

演示:http://jsfiddle.net/MwXN7/

参见文档:http://jqueryvalidation.org/validate/

如果您必须使用插件提供的回调函数外部的处理程序,那么 click 处理程序在这方面效果最好...

$('#myButton').on('click', function (e) {
e.preventDefault(); // block the default submit
if ($('form').valid()) {
console.log("form is valid");
$('#myform').submit(); // now submit the form
} else {
console.log("form is invalid");
}
});

演示 2:http://jsfiddle.net/MwXN7/1/

尽管通过比较两个演示可以看出,第二个演示使用大量外部代码来复制插件已自动处理的内容。

关于jquery - 远程验证导致重复提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20519666/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com