除非单击两次提交按钮，否则表单无法提交且jQuery验证不起作用

Question

I created a form to send out texts. My issue is I have to hit the submit button twice for the form to get the form to send or for the validation to work. I am wanting the validation to work right after the user goes to the next input or at the very least on the first form submission.

Why is the form's button needing clicked on twice for any of this to work? I created a snippet that shows what it is doing.

 $('.text-popup').hide(); //$("#submit-text").on("click", function(event) { $("#text-form").on("submit", function(event) { event.preventDefault(); var number = $("#number").val(); var carrier = $("#carrier").val(); var message = $("#message").val(); var targeted_popup_class = jQuery(this).attr('data-popup-open'); $("#text-form").validate({ onfocusout: true, rules: { number: { required: true, minlength: 2 }, carrier: { required: true }, message: { required: true, minlength: 2 } }, messages: { number: { required: "Please enter the party's phone number.", minlength: "The phone number seems a bit short, doesn't it?" }, carrier: { required: "Please choose their carrier" }, message: { required: "Please enter your message", minlength: "Your message seems a bit short. Please enter at least 2 characters" } }, submitHandler: function(form) { $.ajax({ url: "text-send.php", type: "POST", data: { "number": number, "carrier": carrier, "message": message }, success: function(data) { //console.log(data); // data object will return the response when status code is 200 if (data == "Error!") { alert("Unable to send email!"); alert(data); } else { $("#text-form")[0].reset(); $('.text-popup').fadeIn(350).delay(2000).fadeOut(); } }, complete: function() { $('body, html').animate({ scrollTop: $('#text-success').offset().top }, 'slow'); }, error: function(xhr, textStatus, errorThrown) { alert(textStatus + "|" + errorThrown); //console.log("error"); //otherwise error if status code is other than 200. } }); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> <form action="" method="POST" id="text-form"> <input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number"> <select class="carrier-input" id="carrier" name="carrier"> <option selected="selected">Phone Carrier</option> <option value="vtext.com">Verizon</option> <option value="vmobl.com">Virgin Mobile</option> <option value="sms.alltelwireless.com">Alltel</option> <option value="txt.att.net">AT&T</option> <option value="sms.myboostmobile.com">Boost Mobile</option> <option value="text.republicwireless.com">Republic Wireless</option> <option value="messaging.sprintpcs.com">Sprint</option> <option value="tmomail.net">T-Mobile</option> <option value="email.uscc.net">US Cellular</option> </select> <textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea> <input type="submit" value="Send Text" id="submit-text"> <div class="text-popup" data-popup="popup-1"> <div class="popup-inner"> <div id="popup-inner-content">Your text successfully sent!</div> <a class="popup-close" data-popup-close="popup-1" href="#">x</a> </div> </div> </form> 

Answer 1

The issue that you are experiencing is the validate plugin doesn't need to be wrapped in the onclick. Remove the Onclick event around it. The validate plugin runs ONSUBMIT of the form.

 $('.text-popup').hide(); var number = $("#number").val(); var carrier = $("#carrier").val(); var message = $("#message").val(); var targeted_popup_class = jQuery(this).attr('data-popup-open'); $("#text-form").validate({ onfocusout: true, rules: { number: { required: true, minlength: 2 }, carrier: { required: true }, message: { required: true, minlength: 2 } }, messages: { number: { required: "Please enter the party's phone number.", minlength: "The phone number seems a bit short, doesn't it?" }, carrier: { required: "Please choose their carrier" }, message: { required: "Please enter your message", minlength: "Your message seems a bit short. Please enter at least 2 characters" } }, submitHandler: function(form) { $.ajax({ url: "text-send.php", type: "POST", data: { "number": number, "carrier": carrier, "message": message }, success: function(data) { //console.log(data); // data object will return the response when status code is 200 if (data == "Error!") { alert("Unable to send email!"); alert(data); } else { $("#text-form")[0].reset(); $('.text-popup').fadeIn(350).delay(2000).fadeOut(); } }, complete: function() { $('body, html').animate({ scrollTop: $('#text-success').offset().top }, 'slow'); }, error: function(xhr, textStatus, errorThrown) { alert(textStatus + "|" + errorThrown); //console.log("error"); //otherwise error if status code is other than 200. } }); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> <form action="" method="POST" id="text-form"> <input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number"> <select class="carrier-input" id="carrier" name="carrier"> <option value="" selected="selected">Phone Carrier</option> <option value="vtext.com">Verizon</option> <option value="vmobl.com">Virgin Mobile</option> <option value="sms.alltelwireless.com">Alltel</option> <option value="txt.att.net">AT&T</option> <option value="sms.myboostmobile.com">Boost Mobile</option> <option value="text.republicwireless.com">Republic Wireless</option> <option value="messaging.sprintpcs.com">Sprint</option> <option value="tmomail.net">T-Mobile</option> <option value="email.uscc.net">US Cellular</option> </select> <textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea> <input type="submit" value="Send Text" id="submit-text"> <div class="text-popup" data-popup="popup-1"> <div class="popup-inner"> <div id="popup-inner-content">Your text successfully sent!</div> <a class="popup-close" data-popup-close="popup-1" href="#">x</a> </div> </div> </form>