Question

构建一个简单的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>

谢谢， -Bob

Answer 1

jQuery验证不会阻止click。这是有道理的;我确定该插件可能正在进入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回调中的代码替换了表单提交的默认操作（即执行vanilla HTTP请求）。

JQuery表单验证和提交脚本冲突

1 个答案: