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-side validation. This is my first time using this plugin, so I apologize in advance if my questions seem rudimentary. I've set up the forms so that the user has to fill in both Form X and Form Y to submit the data in both forms. Once that is done, Form X is submitted through Ajax and Form Y is submitted as a result of a success response. The submission process works fine and all the data is sent through perfectly. However, I cannot get validation to work. I've pored through the documentation and multiple forums but have not been able to find a working solution. Any suggestions or links to relevant literature would be greatly appreciated. Here's the relevant javascript and html:

<script>
$("#formYsubmit").click(function(e){
        e.preventDefault();
    $.ajax({
        url: "the resulting page",  
    type: "POST",
        data: formXdata, 
        error: function(resp) {
            console.log(resp);
        },
        success: function(resp) {
            $("#formY").submit();
        }
    });

    $(this).disabled=true;
    $(this).val()="Sending..."
    return false;
});

$('#formX').validate({
    rules: {
        email: {
                required: true,
                email: true
                },
        password: {
                minlength: 6,
                required: true
                },
        full_name: {
                required: true
                },
        site_address: {
                minlength: 5,
                },
        phone: {
                minlength: 10,
                phoneRegex: true
                }
    },
    messages: {
        email: "Please enter a valid email address",
        site_address: "Please enter your website name",
        full_name: "Please enter your name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        phone: "Please enter a valid phone number",         
        email: "Please enter a valid email address"
    },
    highlight: function(label) { 
        $(input).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
$('#formY').validate({
    rules: {
        plan_input: {
                required: true,
                },
        fieldA: {
                required: true
                },
        fieldB: {
                required: true
                },
        fieldC: {
                required: true
                },
    },
    highlight: function(label) { 
        $(input).addClass('error');
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
</script>


<form id="formX" style="float:left; width:40%;" method="post">
    <div class="control-group">
        <div class="controls">                          
            <input id="full_name" name="full_name" placeholder="Full Name" type="text" />
        </div>
        <label class="error"></label>
    </div>    
    <div class="control-group">
        <div class="controls">
            <input class="required" id="email" maxlength="75" name="email" placeholder="Email ID" type="text" />
        </div>
    </div> 
    <div class="control-group">
        <div class="controls">
            <input class="required" id="password" name="password" placeholder="Password" type="password" />
        </div>
        <label class="error"></label>
    </div> 
    <div class="control-group">
        <div class="controls">
            <input id="site_address" name="site_address" placeholder="Website" type="text" />
        </div>
        <label class="error"></label>
    </div>
    <div class="control-group">
        <div class="controls">
            <input id="phone" maxlength="25" name="phone" placeholder="Phone" type="text" />
        </div>
        <label class="error"></label>
    </div>
</form>
<div id="frontServerErrorContainer"></div>
<form id="formY" style="float:left;width:40%;" method="post" action="">
    <select name="plan_input" class="field" id="plan-select" disabled>
        <option value="">Choose Plan</option>
        <option value="1">Option A</option>
        <option value="2">Option B</option>
        <option value="3">Option C</option>
    </select>
    <div id="serverErrorContainer2"></div>
    <div id="errorContainer2"><ul id="errorContainer2"></ul></div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldA' value="" placeholder="fieldA" id="fieldA">
    </div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldB' value="" placeholder="fieldB" id="fieldB">
    </div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldC' value="" placeholder="fieldC" id="fieldC">
    </div>
    <button class="bootstrapbtn bootstrapbtn-primary" id="formYsubmit">Submit</button>
</form>

I apologize for the extremely long snippet of code or if this question is too elementary. Thank you!

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.