2012-12-18 18 views
0

表單提交時未經驗證的常見問題是什麼?我有驗證的那天工作正常,但現在它不驗證和提交。當表單提交跳過jquery.validate時的常見問題

這是一個使用隱藏顯示方法的多頁形式,因爲該函數位於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> 

這裏是驗證URL我在我的頁腳

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

此代碼根本不使用jQuery驗證插件,從我所知道的... –

+0

我知道這是提交表單腳本我有 – user1684086

+2

這也取決於您的HTML。你可以發佈你正在使用的整個「表單」嗎? –

回答

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>