jQueryとjquery.validate divの表示（表示/非表示）

Question

がフォームの正当性を検証したときにのみ、フォーム要素の妥当性を検証します.HTMLとコードのスニペットが含まれています。私のプロファイルタイプでは、プロファイルタイプで値2が選択されている場合、別のdivを表示するためにコーディングの表示/非表示を使用します。ここで何が起こる必要があるのはjquery.validateがdiv id="pro2"のフォーム要素を検証する場合のみです。表示されていない場合は、完了していないというエラーは表示されません。

質問はどうすればよいですか？

<script type="text/javascript"> 
$(document).ready(function() { 
    function showDiv(element, pro2) { 
     if (pro2.children("option:selected").val() == 2) element.show(); 
     else element.hide(); 
    } 
    var myElement = $("div#pro2"); 
    var mypro2 = $("select#ptype"); 
    $("select").change(function() { 
     showDiv(myElement, mypro2) 
    }); 
    $("#ctry").change(function() { 
     $(".state").hide(); 
     var stateSelect = $("#state_" + $(this).val()); 
     stateSelect.show();  
    }); 
    $("input[data-code]").each(function() { 
     $(this).autocomplete("/js/zip/" + $(this).data("code") + ".php", { 
     matchContains: true, matchFirst: true, mustMatch: false, 
     selectFirst: false, cacheLength: 10, minChars: 1, autofill: false, 
     scrollHeight: 150, width: 180, max: 20, scroll: true 
     }); 
    }); 
    $("#form1").validate({ 
     errorLabelContainer: $("#form1 div.error") 
    });  
    // $("#reg_form").validate();  
}); 
</script> 

HTMLコード：

<div class="error"></div>  
<label>Profile Type:</label> 
      <select name="add[type]" id="ptype" 
      title="Select Profile Type!" class="{validate:{required:true}}"> 
      <option value="">-- Select</option> 
      <option value="2">(MF/FF/MM)</option> 
      <option value="1">F or M</option> 
      </select> 


    <div id="pro1">   
      <label>First Name:</label> 
      <input type="text" name="add[name]" size="20" maxlength="15" id="fname" 
      title="Your First Name" class="{required:true,minlength:1}"/> 
      <span class="rsmall">internal use not displayed</span><br /> 
    </div> 
    <div id="pro2"> 
      <label>First Name:</label> 
      <input type="text" name="cpl[name]" size="20" maxlength="15" id="fname" 
      title="Your First Name" class="{required:true,minlength:1}"/> 
      <span class="rsmall">internal use not displayed</span><br /> 
    </div> 

Answer 1

実は、これは動作するはずです。 jquery.validateは、デフォルトですべての隠しフィールドを無視します（この動作をカスタマイズしたい場合は、デフォルトで "：hidden"に設定されている "ignore"オプションがあります）。

あなたのコードには2つの奇妙なものがあり、入力フィールドは同じID "fname"を使用し、class="{required:true,minlength:1}"の代わりにclass="required" minlength="1"である必要があります。少なくともjquery.validate plugin I am usingで。多分あなたは別のプラグインまたは古いバージョンを使用していますか？