Common problems when form submits skipping jquery.validate
Question
What are common problems when a form just submits without being validated. I had it working fine the other day with validation but now it doesn't validate and just submits.
It is a multipage form using the hide show method and that does not work either since that function is in he form.submit code. I'm assuming it is being overpowered but the default but using e.preventdefault() just causes the submit/next button to not have any action.
What are the common small problems when dealing with this like jquery url needs to be before form or script for form needs to also be before form, etc. could maybe accidentally deleting a { or ; be an issue?
here is my form script
<script type="text/javascript">
$('form#mainform').submit(function(e) {
var isValidYear = /^\d{4}$/.test(jQuery('#xxx').val());
var year_number = parseInt(jQuery('#xxxx').val());
var first_name = jQuery.trim(jQuery('#xxx').val());
var last_name = jQuery.trim(jQuery('#xxxx').val());
var form_email = jQuery.trim(jQuery('#xxxxx').val());
var street = jQuery.trim(jQuery('#xxxx').val());
var city = jQuery.trim(jQuery('#xxxx').val());
var state = jQuery.trim(jQuery('#xxxxx').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
if(current_step == 1){
if(!jQuery('#step-1 input["radio"].required').is(":checked")){
alert('Please select xxxxxx');
}
else {
$('#mainform fieldset').hide();
$('#step-2').show();
current_step++;
}
return false;
}
if(current_step == 2){
if(!isValidYear || (year_number > <?php echo date('Y') ?>)){
alert('Please enter a Year.');
}
else {
$('#mainform fieldset').hide();
$('#step-3').show();
current_step++;
}
return false;
}
if(current_step == 3){
if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
$('form#mainform').submit();
}
return false;
}
});
</script>
and here is the validate url i have in my footer
<script src="/jquery/jquery.validate.js"></script>
here is the form
<form name="mainform" id="mainform" action="/results" method="post">
<h2 id="form_headline"><span>xxxxxx</span></h2>
<p id="form_tagline">xxxxxxxxxxx</p>
<fieldset id="step-1" class="form_step">
<div class="meters prog_1"><p>Form Progress:</p></div>
<label for="xxxxxx">xxxxxx</label>
<ul class="col1 form_cols">
<li><input name="eduLevel" id="eduLevel_4" type="radio" value="4" class="required" />Some High School</li>
</ul>
<ul class="col2 form_cols">
<li><input name="eduLevel" id="eduLevel_18" type="radio" value="18" class="required" /> High School Diploma</li>
</ul>
</fieldset><!-- end #step-1 -->
<fieldset id="step-2" class="form_step">
<div class="meters prog_2"><p>Form Progress:</p></div>
<label for="xxxxxxxx">Select a Year</label>
<select name="xxxxxxx" id="xxxxxx" class="required" >
<option value="">Select Year</option>
<option value="2011" >2011</option>
<option value="2010" >2010</option>
</select>
</fieldset><!-- end #step-2 -->
<fieldset id="step-3" class="form_step">
<div class="meters prog_3"><p>Form Progress:</p></div>
<label for "first_name">First Name</label>
<input type="text" id="first_name" name="first_name" class="required" />
<label for "last_name">Last Name</label>
<input type="text" id="last_name" name="last_name" class="required" />
<label for "street">Street Address</label>
<input type="text" id="street" name="street" class="required" />
<div id="address_line">
<div id="line_city">
<label for "city">City</label>
<input type="text" id="city" name="city" class="required" />
</div><!-- end .address_line -->
<div class="line_state">
<label for "state">State</label>
<select name="state" id="state" class="required" >
<option value="">Select State</option>
<optgroup label="US States">
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
<option value="AZ" >Arizona</option>
<option value="AR" >Arkansas</option>
<option value="CA" >California</option>
<option value="CO" >Colorado</option>
<option value="CT" >Connecticut</option>
<option value="DE" >Delaware</option>
<option value="DC of Columbia" >District of Columbia</option>
<option value="FL" >Florida</option>
<option value="GA" >Georgia</option>
<option value="HI" >Hawaii</option>
<option value="ID" >Idaho</option>
<option value="IL" >Illinois</option>
<option value="IN" >Indiana</option>
<option value="IA" >Iowa</option>
<option value="KS" >Kansas</option>
<option value="KY" >Kentucky</option>
<option value="LA" >Louisiana</option>
<option value="ME" >Maine</option>
<option value="MD" >Maryland</option>
<option value="MA" >Massachusetts</option>
<option value="MI" >Michigan</option>
<option value="MN" >Minnesota</option>
<option value="MS" >Mississippi</option>
<option value="MO" >Missouri</option>
<option value="MT" >Montana</option>
<option value="NE" >Nebraska</option>
<option value="NV" >Nevada</option>
<option value="NH" >New Hampshire</option>
<option value="NJ" >New Jersey</option>
<option value="NM" >New Mexico</option>
<option value="NY" >New York</option>
<option value="NC" >North Carolina</option>
<option value="ND" >North Dakota</option>
<option value="OH" >Ohio</option>
<option value="OK" >Oklahoma</option>
<option value="OR" >Oregon</option>
<option value="PA" >Pennsylvania</option>
<option value="PR" >Peurto Rico</option>
<option value="RI" >Rhode Island</option>
<option value="SC" >South Carolina</option>
<option value="SD" >South Dakota</option>
<option value="TN" >Tennessee</option>
<option value="TX" >Texas</option>
<option value="UT" >Utah</option>
<option value="VT" >Vermont</option>
<option value="VA" >Virginia</option>
<option value="WA" >Washington</option>
<option value="WV" >West Virginia</option>
<option value="WI" >Wisconsin</option>
<option value="WY" >Wyoming</option>
</optgroup>
<option value="" ></option>
<optgroup label="Canada States">
<option value="AB" >Alberta</option>
<option value="BC" >British Columbia</option>
<option value="MB" >Manitoba</option>
<option value="NB" >New Brunswick</option>
<option value="NL" >Newfoundland & Labrador</option>
<option value="NS" >Nova Scotia</option>
<option value="NT" >Northwest Territories</option>
<option value="NU" >Nunavut</option>
<option value="ON" >Ontario</option>
<option value="PE" >Prince Edward Island</option>
<option value="QC" >Quebec</option>
<option value="SK" >Saskatchewan</option>
<option value="YT" >Yukon Territory</option>
</optgroup>
</select>
</div><!-- end .address_line -->
<div class="line_country">
<label for "country">Country</label>
<select name="country" id="country" class="required" >
<option value="US" selected >USA</option>
<option value="CA" >Canada</option>
<option value="Other" >Other</option>
</select>
</div>
</div><!-- end #address_line -->
<label for "phone_day">Daytime Phone Number</label>
<input type="text" id="phone_day" name="phone_day" class="required" />
</fieldset><!-- end #step-5 -->
<!-- passing program variable to schools page -->
<input type="hidden" name="SearchCareerFieldID" value="29" />
<button id="form_submit" class="form_btn" type="submit" value="" ></button>
</form><!-- end #mainform -->
1 answers
solution1
0 2013-07-31 14:30:47
Have a look at the last few lines
<script type="text/javascript">
$('form#mainform').submit(function(e) {
var isValidYear = /^\d{4}$/.test(jQuery('#xxx').val());
var year_number = parseInt(jQuery('#xxxx').val());
var first_name = jQuery.trim(jQuery('#xxx').val());
var last_name = jQuery.trim(jQuery('#xxxx').val());
var form_email = jQuery.trim(jQuery('#xxxxx').val());
var street = jQuery.trim(jQuery('#xxxx').val());
var city = jQuery.trim(jQuery('#xxxx').val());
var state = jQuery.trim(jQuery('#xxxxx').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
if(current_step == 1){
if(!jQuery('#step-1 input["radio"].required').is(":checked")){
alert('Please select xxxxxx');
}
else {
$('#mainform fieldset').hide();
$('#step-2').show();
current_step++;
}
return false;
}
if(current_step == 2){
if(!isValidYear || (year_number > <?php echo date('Y') ?>)){
alert('Please enter a Year.');
}
else {
$('#mainform fieldset').hide();
$('#step-3').show();
current_step++;
}
return false;
}
if(current_step == 3){
if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
//don't do a submit inside .submit(). It's an infinate loop
return true; //instead, return true
}
}
return false; //return false for everything else
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
PHP Formmailer with jquery.validate and jquery-form (AJAX and JSON)
JQuery.Validate() - remote rule
jQuery.validate not working with post via ajax
jquery.validate not working for select box
How to override jquery.validate in Magento 2
Check if there's already an “active” class on element on jQuery.validate()
JQuery AJAX: Form submits twice
jQuery submits the wrong html form
jquery mail validation submits the form
JQuery button takes url and submits php form
Related Tags