Jquery Validate input fields onkeyup then perform function if button clicked

[kasseria]

I have searched everywhere but cannot seem to find the solution. I am trying to create a form in which it has 3 fieldsets with only one fieldset visible at a time. I have the onkeyup validation working as it appears like the following:\[code\]$("#contactInfoForm").validate({ debug:true, onkeyup: false, rules: { firstName: { required: true, loginRegex: true, minlength: 2 }, lastName: { required: true, minlength: 2 }, Email:{ required: true, email: true }, Email_confirm:{ required: true, email: true, equalTo: "#Email" }, streetAddressBilling:{ required: true, minlength: 3 }, billingCity:{ required: true, digits: true, minlength: 3 }, state:{ required: true }, zip:{ required: true, digits: true, minlength: 3 }, phone:{ required: true, digits: true, minlength: 3, phoneUS: true, }, prefix:{ required: true, digits: true, minlength: 3 }, landline:{ required: true, digits: true, minlength: 4 } },//end of rules groups: { DateofBirth: "phone prefix landline" }, errorPlacement: function(error, element) { if (element.attr("name") == "phone" || element.attr("name") == "prefix" || element.attr("name") == "landline") error.insertAfter("#landline"); else error.insertAfter(element); }, messages:{ firstName: { required: "Please enter first name", lettersonly: "No numbers please", loginRegex: "Login format not valid", minlength: "Use at least 2 letters" }, lastName: { required: "Please enter last name", lettersonly: "No numbers please", minlength: "Use at least 2 letters" }, Email: { required: "Please enter your email", email: "Please enter a valid email address" }, Email_confirm: { required: "Please enter your email", email: "Please enter a valid email address", equalTo: "Email addresses do not match" }, streetAddressBilling:{ required: "Please enter your street address", minlength: "Use at least 3 letters" }, billingCity:{ required: "Please enter your city", minlength: "Use at least 3 letters" }, state:{ required: "Please select your state." }, zip:{ required: "Please enter your zip code", digits: "Please only use numbers", minlength: "Use at least 5 letters" }, phone:{ required: "Please enter your phone number", digits: "Please only use numbers", minlength: "Use 3 numbers" }, prefix:{ required: "Please enter your phone number", digits: "Please only use numbers", minlength: "Use 3 numbers" }, landline:{ required: "Please enter your phone number", digits: "Please only use numbers", minlength: "Use 4 numbers" } }//end of messages });//end of contact info form validation rules\[/code\]The next thing I am trying to do is have a continue button at the end of each fieldset. The button is supposed to check the forms in that fieldset and if they are validated, then open the next fieldset. Below is the HTML for a fieldset:\[code\] <form onsubmit="return submitForm(this)" method="post" id="contactInfoForm" name="contactInfoForm" action="#"> <fieldset> <legend class="accessible-text">Address</legend> <ol> <li class="fullInput"> <label id="caption_address1" for="address1"> Address </label> <input type="text" autocomplete="off" aria-required="true" placeholder="Street Address" class="fullInput" maxlength="30" id="address1" name="address1"> </li> <li class="no-label fullInput"> <label class="accessible-text" id="caption_address2" for="address2"> Billing Address Line 2 </label> <input type="text" maxlength="40" autocomplete="off" aria-required="false" placeholder="Street Address Line 2(Optional)" class="fullInput" id="address2" name="address2"> </li> <li class="no-label"> <label class="accessible-text" id="caption_city" for="city"> City </label> <input type="text" aria-required="true" placeholder="City" maxlength="30" id="city" name="city"> </li> <li class="no-label"> <label class="accessible-text" id="caption_state" for="state"> State </label> <select aria-required="true" class="required" name="state" id="state"> <option value="">State</option> </select> </li> <li class="no-label"> <label class="accessible-text" id="caption_zipCode" for="zipCode"> ZIP </label> <input type="text" autocomplete="off" aria-required="true" placeholder="20151" name="zipCode" id="zipCode" maxlength="5"> </li> <li> <label class="fullInput" id="caption_phone" for="phone"> Main Contact Number <a href="">Why we need this</a><br> <span class="accessible-text">Please enter your area code</span> </label> <input type="text" autocomplete="off" aria-required="true" placeholder="703" name="phone" id="phone" maxlength="3"> <label class="accessible-text" id="caption_prefix" for="prefix"> Enter the next 3 numbers </label> <input type="text" autocomplete="off" aria-required="true" placeholder="555" name="prefix" id="prefix" maxlength="3"> <label class="accessible-text" id="caption_landline" for="landline"> Enter the last 4 numbers </label> <input type="text" autocomplete="off" aria-required="true" placeholder="5555" name="landline" id="landline" maxlength="4"> </li> </ol> </fieldset> </form>\[/code\]Here is the JS for the button, I am using jquery ui for the fading:\[code\]$("#button").on("click", function(event){ if($('#contactInfoForm').validate({ rules: { firstName: { required: true, loginRegex: true, minlength: 2 }, lastName: { required: true, minlength: 2 }, Email:{ required: true, email: true }, Email_confirm:{ required: true, email: true, equalTo: "#Email" }, streetAddressBilling:{ required: true, minlength: 3 }, billingCity:{ required: true, digits: true, minlength: 3 }, state:{ required: true }, zip:{ required: true, digits: true, minlength: 3 }, phone:{ required: true, digits: true, minlength: 3, phoneUS: true, }, prefix:{ required: true, digits: true, minlength: 3 }, landline:{ required: true, digits: true, minlength: 4 } },//end of rules })){ //checks if it's valid if($(this).valid()) { $('#about_you_ver2').toggleClass("mod"); $('#nameFieldsetEdit').toggleClass("hide"); $('#name').fadeOut('xslow', function(){ //$(this).effect("highlight", {}, 2000); }), $('#billing_address').fadeIn('xslow', function(){ //$(this).effect("highlight", {}, 2000); }), $('#billing_container p').fadeIn('xslow', function(){ //$(this).effect("highlight", {}, 2000); }) }//end of valid direction } else{ alert("I'm not valid"); }});//end of onclick for button\[/code\]I am stuck at the point where the form passes validation when clicking the button without entering any information. How can I accomplish this issue?