Validate two forms when one's submission depends on the other

Question

I\'m working on this project and am getting stuck with form validation. I have two forms, Form X and Form Y and I wanna use the jQuery validation plugin to implement client-

Answer 1

Your ajax belongs inside the submitHandler callback of the Validate plugin. You also need to wrap everything inside a DOM ready hander function to ensure the HTML exists when .validate() is called. You should not need any ajax outside of .validate(), nor should you need any additional click handlers.

<script>

    $(document).ready(function() {

        $('#formX').validate({
            // rules & options here
        });

        $('#formY').validate({
            // rules & options here,
            submitHandler: function(form) {
                // only fires when form is valid
                $("#formYsubmit").disabled=true;
                $("#formYsubmit").val()="Sending..."
                form.serialize();
                // your ajax here
                return false; // prevent the regular form submit when using ajax
            }
        });

    });

</script>

Documentation: http://jqueryvalidation.org/validate/

submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.