JQuery驗證不工作，如果選擇框選項已更改

Question

我有一個提交表單，其中我檢查是否選擇某種類型的選項我的驗證更改根據它，但它不工作可以任何身體幫助我這裏是我的HTML形式：

<form method="post" id="addnews" action="/app/index.php/admin/sizes/save" enctype="multipart/form-data" style="margin-top:0px" name="addnews"> 
     <table width="100%" class="font"> 
      <tbody><tr> 
       <td colspan="2"><span style="color: rgb(204, 0, 0); padding-left: 302px;">(Note:Fields marked with * are required)</span></td> 
      </tr> 
      <tr> 
       <td colspan="2">&nbsp;</td> 

      </tr> 
      <tr> 
       <td style="width:301px;text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font>&nbsp;Size Type: </label></td> 
       <td style="text-align:left"> 
        <select onchange="getForm(this.value);" style="width:206px;" name="size_type" id="size_type" class="common_form"> 
         <option value="0">Template</option><option value="1"> Wallart</option>     </select> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <table width="100%" cellspacing="3" cellpadding="0" style="display:block inline;" id="templateForm" class="font"> 
         <tbody><tr> 
          <td style="text-align:right; vertical-align:middle;"> 
           <label><font size="4" color="Red">*</font>&nbsp;Name: </label> 
          </td> 
          <td style="text-align:left"> 
           <input type="text" value="" maxlength="200" id="name" name="name" class="common_form"> 
                   <label style="display:none;" id="name_lbl">Please enter name</label> 
          </td> 
         </tr> 
         <tr> 
          <td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font>&nbsp;Code: </label></td> 
          <td style="text-align:left"> 
           <input type="text" value="" maxlength="200" id="code" name="code" class="common_form">   
                  <label style="display:none;" id="code_lbl">Please enter code</label> 
          </td> 
         </tr> 
         <tr> 
          <td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font>&nbsp;Num Code: </label></td> 
          <td style="text-align:left"> 
           <input type="text" value="" maxlength="200" id="num_code" name="num_code" class="common_form"> 
                  <label style="display:none;" id="numc_lbl">Please enter num code</label> 
          </td> 
         </tr> 
        </tbody></table> 
             <table width="100%" cellspacing="3" cellpadding="0" style="display:none;" id="wallartForm" class="font"> 
         <tbody><tr> 
          <td style="text-align:right; vertical-align:middle;width:299px;"> 
           <label><font size="4" color="Red">*</font>&nbsp;Width: </label> 
          </td> 
          <td style="text-align:left"> 
           <input type="text" value="" maxlength="200" id="width" name="width" class="common_form"> 
          </td> 
         </tr> 
         <tr> 
          <td style="text-align:right; vertical-align:top;"><label><font size="4" color="Red">*</font>&nbsp;Height: </label></td> 
          <td style="text-align:left"> 
           <input type="text" value="" maxlength="200" id="height" name="height" class="common_form">   
          </td> 
         </tr> 
        </tbody></table> 
       </td> 
      </tr>    
      <tr> 
       <td style="text-align:right"><label>Status: </label></td> 
       <td style="text-align:left"> 
        <input type="radio" checked="checked" value="1" name="is_active">Active 
        <input type="radio" value="0" name="is_active">Inactive 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2">&nbsp;</td> 

      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td style="text-align:left"> 
        <input type="hidden" value="" name="id" id="id"> 
        <input type="submit" value="Save" id="submitT" onclick="if($('#size_type').val() == 1){check('W',this.form);}else{check('T',this.form);}" class="button115_a"> 

        <input type="button" onclick="back();" value="Back" class="button90_b"> 
       </td> 
      </tr> 
     </tbody></table> 
    </form> 

在選擇框改變我隱藏表單的某些領域也將復位我的形式，如果任何驗證以前做：

function getForm(id) 
{ 
     var validator = $("#addnews").validate(); 
     validator.resetForm(); 
    if(id == 1) 
    { 
     $("#templateForm").attr("style","display:none;"); 
     $("#wallartForm").attr("style","display:block inline;"); 

    } 
    else 
    { 
     $("#templateForm").attr("style","display:block inline;"); 
     $("#wallartForm").attr("style","display:none;"); 


    } 
} 

這是我的驗證功能：

function check(type){ 


      if(type == "T"){ 

      $('#addnews').validate({ 
      rules: { 
       name:{required:true}, 
       code:{required:true}, 
       num_code:{required:true} 
      }, 
      messages:{ 
       name:{required:"<br>Please enter size name"}, 
       code:{required:"<br>Please enter size code"}, 
       num_code:{required:"<br>Please enter size num code"} 
      } 
     }); 
      } 
      else{ 
       alert("yes") 
       $('#addnews').validate({ 
      rules: { 
       width:{required:true}, 
       height:{required:true} 

      }, 
      messages:{ 
       width:{required:"<br>Please enter width"}, 
       height:{required:"<br>Please enter height"} 

      } 
     }); 

      } 


     } 

的驗證適用於模板選擇，但不工作的wallart選擇

Answer 1

這是很多比你想象 - jQuery的驗證插件忽略由默認的隱藏字段，給你你需要「開箱即用的功能」。你需要做的是

首先要確保你有一個版本的插件> = 1.9.0，然後

1. 設置您的驗證整個表單
2. 隱藏和顯示兩個部分你getForm（...）函數
3. 形式讓jQuery的驗證完成剩下的

（所以你不需要你的檢查（...）函數）

保持你的HTML一樣，用替換你的腳本這

<script> 

function getForm(id) { 
    if (id == 1) { 
     $("#templateForm").attr("style", "display:none;"); 
     $("#wallartForm").attr("style", "display:block inline;"); 

    } 
    else { 
     $("#templateForm").attr("style", "display:block inline;"); 
     $("#wallartForm").attr("style", "display:none;"); 
    } 
} 


$(function() { 
    $('#addnews').validate({ 
     rules: { 
      name: { required: true }, 
      code: { required: true }, 
      num_code: { required: true }, 
      width: { required: true }, 
      height: { required: true } 
     }, 
     messages: { 
      name: { required: "<br>Please enter size name" }, 
      code: { required: "<br>Please enter size code" }, 
      num_code: { required: "<br>Please enter size num code" }, 
      width: { required: "<br>Please enter width" }, 
      height: { required: "<br>Please enter height" } 
     }, 
     submitHandler: function() { 
      alert('form is valid'); 
     } 
    }); 
}); 
</script>