Databases
StackOverflow2013
Postsdbo
POJavascript Validate on input change, only submit when Submit button clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Validate on input change, only submit when Submit button clicked
    text
    copied!<p>I have a form on my site. When the submit button is clicked, a function runs to get the contents of each field, validate the contents based on RegEx and other requirements, and then if everything looks fine, the form is submitted via Ajax to a .php mailer. </p> <p><strong>I would like the form to validate automatically when the input field values change, OR when the input field loses focus (I have no preference, either would be great) AND THEN I would like the form to submit ONLY when the user clicks the Submit button on the form.</strong> If the user clicks the Submit button BEFORE all fields are valid, I do NOT want the form to submit.</p> <p>Here's my code:</p> <pre><code> //contact form validation $(function(){ $('.error').hide(); // hide error messages onchange $("#contact-form").change(function(){ $('.error').hide(); $("label#name_error").hide(); $("label#invalid_error").hide(); $("label#email_error").hide(); $("label#invalid_phone_error").hide(); $("label#phone_error").hide(); $("label#zip_error").hide(); }); // validate fields on click $(".cool-button").click(function(){ $('.error').hide(); $("label#name_error").hide(); $("label#invalid_error").hide(); $("label#email_error").hide(); $("label#invalid_phone_error").hide(); $("label#phone_error").hide(); $("label#zip_error").hide(); var name=$("input#contact_name").val(); var email=$("input#contact_email").val(); var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/ var phone=$("input#contact_phone").val(); var phone=phone.replace(/\s+-/g, ""); var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ var zip=$("input#contact_zip").val(); var best_time=$("input#contact_best_time").val(); var message=$("textarea#contact_message").val(); var timestamp=$("input#timestamp").val(); if(name==""){ $("label#name_error").show(); $("input#contact_name").focus();return false; } if(email==""){ $("label#email_error").show(); $("input#contact_email").focus();return false; } if (document.getElementById('contact_email').value.search(emailRegEx )==-1) { $("label#invalid_error").show(); $("input#contact_email").focus();return false; } if(phone==""){ $("label#phone_error").show(); $("input#contact_phone").focus();return false; } if (document.getElementById('contact_phone').value.search(phoneRegEx )==-1) { $("label#invalid_phone_error").show(); $("input#contact_phone").focus();return false; } if(zip==""){ $("label#zip_error").show(); $("input#contact_zip").focus();return false; } if(message==""){ $("label#message_error").show(); $("textarea#contact_message").focus();return false; } else { var dataString='contact_name='+name+'&amp;contact_email='+email+'&amp;contact_phone='+phone+'&amp;contact_zip='+zip+'&amp;contact_best_time='+best_time+'&amp;timestamp='+timestamp+'&amp;contact_message='+encodeURIComponent(message); $.ajax({ type:"POST", url:"php/contact.php", data:dataString, success:function(){$('#contact-form').html("&lt;div id='message'&gt;&lt;/div&gt;");$('#message').html("&lt;h3&gt;Message Sent&lt;/h3&gt;").append("&lt;p&gt;Thank you for contacting us. We'll be in touch. &lt;br /&gt;&lt;br /&gt;If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473&lt;/p&gt;").hide().fadeIn(800,function(){$('#message').append("&lt;img id='checkmark' src='images/submit2.png' /&gt;");});}}); } return false; }); }); </code></pre> <p>AND HERE IS THE HTML and PHP CODE FOR THE FORM</p> <pre><code>&lt;form id="contact-form" method="post" action="#"&gt; &lt;p class="form-subscr-field"&gt; &lt;label for="contact_name" id="contact_name_label"&gt;Your name: *&lt;/label&gt; &lt;input id="contact_name" type="text" name="contact_name" class="inputbox" size="10" required/&gt; &lt;label class="error error-tip" for="contact_name" id="name_error" style="display: none; "&gt;Please enter your name.&lt;/label&gt; &lt;/p&gt; &lt;p class="form-subscr-field"&gt; &lt;label for="contact_email" id="contact_email_label"&gt;E-mail Address: *&lt;/label&gt; &lt;input id="contact_email" type="email" name="contact_email" class="inputbox" size="10" required/&gt; &lt;label class="error error-tip" for="contact_email" id="email_error" style="display: none; "&gt;Please enter your email address.&lt;/label&gt; &lt;label class="error error-tip" for="contact_email" id="invalid_error" style="display: none; "&gt;Invalid email address.&lt;/label&gt; &lt;/p&gt; &lt;fieldset class="w50"&gt; &lt;p class="form-subscr-field rowElem left"&gt; &lt;label for="contact_phone" id="contact_phone_label"&gt;Phone: *&lt;/label&gt; &lt;input id="contact_phone" type="tel" name="contact_phone" class="inputbox" size="10" required minlength="9"/&gt; &lt;label class="error error-tip" for="contact_phone" id="phone_error" style="display: none; "&gt;Please enter your phone number.&lt;/label&gt; &lt;label class="error error-tip" for="contact_phone" id="invalid_phone_error" style="display: none; "&gt;Please enter a valid phone number.&lt;/label&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;fieldset class="w50"&gt; &lt;p class="form-subscr-field rowElem right"&gt; &lt;label for="contact_zip" id="contact_zip_label"&gt;Zip Code: *&lt;/label&gt; &lt;input id="contact_zip" type="text" name="contact_zip" class="inputbox" size="10" required minlength="5"/&gt; &lt;label class="error error-tip" for="contact_zip" id="zip_error" style="display: none; "&gt;Please enter your shipping zip code.&lt;/label&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;p class="form-subscr-field"&gt; &lt;label for="contact_best_time" id="contact_best_time_label"&gt;Best time to Contact:&lt;/label&gt; &lt;input id="contact_best_time" type="text" name="contact_best_time" class="inputbox" size="10" /&gt; &lt;/p&gt; &lt;p class="form-subscr-field"&gt; &lt;label for="contact_message" id="comment_label"&gt;Your message: *&lt;/label&gt; &lt;textarea id="contact_message" name="contact_message" rows="8" cols="30" required minlength="2"&gt;&lt;/textarea&gt; &lt;label class="error error-tip" for="contact_message" id="message_error" style="display: none; "&gt;This field is required.&lt;/label&gt; &lt;/p&gt; &lt;input type="hidden" id="timestamp" name="timestamp" value="&lt;?php $hourdiff = "2"; // hours diff btwn server and local time $insertdate = date("l, d F Y h:i a",time() + ($hourdiff * 3600)); print ("$insertdate"); ?&gt;" /&gt; &lt;div class="submit-contact"&gt; &lt;p&gt; &lt;input type="submit" name="submit" class="cool-button csbutton-color spot-action" id="contact_button" value="Submit" /&gt; &lt;/p&gt; &lt;/div&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload