2012-12-18 2 views
0

양식을 검증하지 않고 제출할 때 자주 발생하는 문제는 무엇입니까? 전에 유효성 확인을 사용하여 작업 한 것이 좋았지 만 이제는 유효성을 검사하지 않고 제출 만합니다.양식 제출을 건너 뛰는 일반적인 문제 jquery.validate

hide show 메소드를 사용하는 다중 페이지 양식이며 해당 기능이 form.submit 코드에 있기 때문에 작동하지 않습니다. 내가 그것을 압도 당하고 있다고 가정하지만 기본값이지만 e.preventdefault()를 사용하면 submit/next 버튼에 아무런 조치가 없게됩니다.

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

이며, 여기

<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에도 달려 있습니다. 당신이 작업하고있는 전체'form '을 게시 할 수 있습니까? –

답변

0

가에서보세요 형태 난 내 글 여기

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

에있는 유효성 검사의 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 { 
        //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> 
관련 문제