Jquery驗證不適用於動態控件

Question

我需要對動態控件使用jquery驗證。我嘗試過，但我無法實現它。在這個問題上幫助我。

瀏覽：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var count = 0; 
     $("#dynamicControlForm").validate(); 
     $("#AddControls").click(function() { 
      count++; 
      var elements = "<input type='text' id='txt" + count + "'class='rec'/><br/></br>"; 
      $(elements).appendTo("#dynamicControlForm"); 
      $(".rec").each(function() { 
       $(this).rules("add", { 
       required: true, 
       messages: { 
        required: "Required field" 
       } 
      }); 
      }); 
     }); 
    }); 
</script> 
<div id="DynamicControlsContainer"> 
    <input type="button" name="CreateControl" value="AddControl" id="AddControls" /> 
    <form action="/" method="post" id="dynamicControlForm"> 
    <input type="submit" name="DynamicControl" id="btnDynamicSubmit" value="Submit" /> 
    </form> 
</div> 

Answer 1

你的代碼是非常接近的。

但是，您的動態創建的input元素中缺少name屬性。

jQuery Validate插件要求所有要驗證的數據輸入元素必須每個都有唯一的name屬性。

這工作...

$(document).ready(function() { 

    $(document).ready(function() { 
     var count = 0; 
     $("#dynamicControlForm").validate(); 
     $("#AddControls").click(function() { 
      count++; 
      var elements = "<input type='text' id='txt" + count + "' name='txt" + count + "' class='rec'/><br/></br>"; 
      $(elements).appendTo("#dynamicControlForm"); 
      $(".rec").each(function() { 
       $(this).rules("add", { 
        required: true, 
        messages: { 
         required: "Required field" 
        } 
       }); 
      }); 
     }); 
    }); 

}); 

工作DEMO：http://jsfiddle.net/sVFgK/