JQuery form validation and submit scripts conflict_问答_开发者

Built a simple JQuery/Ajax newsletter signup form, then went back after the fact to add JQuery validation. I'm not very experienced with javascript/jquery; been working on this for days and am flat out of ideas.

Each script works individually. The validator works properly if the submit code is removed (although it will work fine with a form action URL specified). The submit script works perfectly with the validator code removed. However, with both in place, no validation takes place and the form still gets submitted vie the submission script.

All my attempts at integrating the two have failed miserably.

Obviously I'm missing something rather major. Even the slightest nudge in the right direction would be hugely appreciated

Here's the code in its entirety:

<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 e开发者_运维百科rror 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>

Thanks, -Bob

It looks like click is not prevented by jQuery validate. This makes sense; I'm sure the plugin is probably tapping into the submit event.

When using jQuery validate, your best bet for integrating AJAX functionality is probably going to be in the submitHandler callback. So it should be a matter of simply moving some code around:

$("#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);
            }
        });
    }
});

The code in the submitHandler callback replaces the default action of the form submission (which is to do a vanilla HTTP request).