jQuery表单验证和提交脚本冲突答案

【问题标题】：JQuery form validation and submit scripts conflictjQuery表单验证和提交脚本冲突
【发布时间】：2011-07-31 01:45:28
【问题描述】：

构建了一个简单的 JQuery/Ajax 时事通讯注册表单，然后返回添加 JQuery 验证。我对 javascript/jquery 不是很有经验；几天来一直在研究这个问题，但完全没有想法。

每个脚本单独运行。如果提交代码被删除，验证器可以正常工作（尽管它可以在指定表单操作 URL 时正常工作）。提交脚本在删除验证器代码的情况下完美运行。但是，如果两者都到位，则不会进行验证，并且仍会通过提交脚本提交表单。

我所有整合两者的尝试都以惨败告终。

显然我错过了一些相当重要的东西。即使是在正确的方向上最轻微的推动也会受到极大的赞赏

这是完整的代码：

<html>
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>


<!-- form validator -->
<script>
$(document).ready(function(){
 // run validator, specifies name of css div that will be displayed
// on error and hide when corrected
$("#nl").validate({
errorContainer: "#errorcontainer",
});
 });
</script>


<!-- form submit -->
<script>
$(function() {
// These first three lines of code compensate for Javascript being turned on and off. 
// It changes the submit input field from a type of "submit" to a type of "button".

var paraTag = $('input#submit').parent('b');
$(paraTag).children('input').remove();
$(paraTag).append('<input type="button" name="submit" id="submit" value="Submit" />');

$('input#submit').click(function() {

    $("#response").css("display", "none");
    $("#loading").css("display", "block");

    $.ajax({
        type: 'GET',
        url: 'http://app.icontact.com/icp/signup.php',
        data: $("form").serialize(),
        complete: function(results) {
    setTimeout(function() {

    $("#loading").css("display", "none");
    $("#response").css("display", "block");
    }, 1500);
        }
    }); // end ajax
});
});
</script>   



<style type="text/css">
<!--
#errorcontainer {
display: none;
}
#response {
display: none;
}
-->
</style>
</head>
<body>
<div id="newsletter">
<form id="nl" method="post" action="">
<div id="heading">Sign up for the NCMP newsletter </div>
<div>
  <input name="fields_fname" type="text" id="fields_fname" class="required" value="First Name" size="25" />
</div>
<div>
  <input name="fields_email" class="example-default-value" type="text" id="fields_email" value="Email address" />
</div>
<b>
  <input type="submit" name="submit" id="submit" value="Submit" />
</b>
<div id="response">from submit script - shows on success</div>
<div id="loading"></div>
</form>
</div>
<div id="errorcontainer">from validator script - shows on error</div>
</body>
</html>

谢谢， -鲍勃

【问题讨论】：

标签： jquery forms validation jquery-validate conflict

【解决方案1】：

看起来click 没有被 jQuery 验证阻止。这是有道理的；我确定该插件可能正在利用submit 事件。

使用 jQuery 验证时，集成 AJAX 功能的最佳选择可能是在 submitHandler 回调中。所以应该只是简单地移动一些代码：

$("#nl").validate({
    errorContainer: "#errorcontainer",
    submitHandler: function () {
        $("#response").css("display", "none");
        $("#loading").css("display", "block");

        $.ajax({
            type: 'GET',
            url: 'http://app.icontact.com/icp/signup.php',
            data: $("form").serialize(),
            complete: function(results) {
                setTimeout(function() {
                    $("#loading").css("display", "none");
                    $("#response").css("display", "block");
                }, 1500);
            }
        });
    }
});

submitHandler 回调中的代码替换了表单提交的默认操作（即执行普通 HTTP 请求）。

【讨论】：

嗯...我有一些伐木工作要做。这就像一个冠军，谢谢你
@Bob：没问题，如果有帮助记得采纳:)