表单提交跳过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 &amp; 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 -->

Answer 1

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>