0

当表单未经验证就提交时常见的问题是什么。前几天我通过验证让它工作正常,但现在它没有验证,只是提交。

这是一个使用 hide show 方法的多页表单,并且由于该函数在他的 form.submit 代码中,所以它也不起作用。我假设它被压倒了,但默认但使用 e.preventdefault() 只会导致提交/下一步按钮没有任何动作。

处理此问题时常见的小问题是什么,例如 jquery url 需要在表单之前,或者表单的脚本也需要在表单之前,等等。可能会意外删除 { 或 ; 是个问题?

这是我的表单脚本

    <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>

这是我在页脚中的验证网址

<script src="/jquery/jquery.validate.js"></script>

这是表格

<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 -->
4

1 回答 1

0

看看最后几行

<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>
于 2013-07-31T14:30:47.180 回答