Confirm two forms when one view depends on the other

Question

I am working on this project and I am stuck in validating the form. I have two forms: form X and form Y, and I want to 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 created the forms so that the user fills in both form X and form Y to send data to both forms. Once this is done, Form X will be sent via Ajax, and Form Y will be submitted as a result of a successful response. The presentation process is working fine and all data is sent through perfectly. However, I cannot get validation to work. I looked through the documentation and several forums, but could not find a working solution. Any suggestions or links to relevant literature will be greatly appreciated. Here are 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 piece of code or if this question is too elementary. Thanks!

Answer 1

Your ajax belongs inside the submitHandler the Validate plugin callback. You also need to wrap everything inside the ready hander DOM function to ensure that HTML exists when .validate() called. You do not need any ajax outside .validate() , and you do not need 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 to handle the actual submission when the form is valid. Gets the form as the only argument. Replaces the default sending. The correct place to submit the form is through Ajax after it is confirmed.