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='required'/><br/></br>"; 
      $(elements).appendTo("#dynamicControlForm"); 
      $(".required").rules("add" + count, "required"); 
     }); 
    }); 
</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> 

圖片：

鏈接

鏈接 - http://jsfiddle.net/qwuPk/1/

鏈路2

http://jsfiddle.net/LtAy5我添加的代碼爲下拉，無線電和checkbox

Answer 1

我認爲這是一個錯誤在你添加規則方法

$("#AddControls").click(function() { 
    count++; 
    var elements = "<input type='text' id='txt" + count + "' name='txt" + count + "' class='rec'/><br/></br>"; 
    var $elem = $(elements).appendTo("#dynamicControlForm"); 
    $elem.rules("add", { 
     required: true 
    }); 
}); 

演示：Fiddle

Answer 2

我認爲你應該去在你的頁面上添加動態控件後驗證表單的方法o n按鈕點擊事件。在這種情況下，你需要驗證你的表單然後應用下面的代碼塊，

<script type="text/javascript"> 
    $(document).ready(function() { 
     var count = 0; 
     $("#AddControls").click(function() { 
      count++; 
      var elements = "<input type='text' id='txt" + count + "'class='required'/><br/></br>"; 
      $("#dynamicControldiv").append(elements); 
      $(".required").rules("add" + count, "required"); 
     }); 

      $("#btnDynamicSubmit").on("click", function() { 
     var textlength = $("input[type='text']").attr("class", "required"); 
     for (var i = 1; i <= textlength.length; i++) { 
      var id = $("#txt" + i).attr('id'); 
      var value = $("#txt" + i).attr('value'); 
      if (value == "") { 
       $("#txt" + i).attr("required", "required"); 
      } 
     } 
     var validation = $("#dynamicControlForm"); //Your form id. 
     if (!validation.valid()) { 
      $("input[type='text']").attr("required", "required"); 
      return false; 
     } 

    }); 
    }); 
</script> 

查看

<div id="DynamicControlsContainer"> 
    <input type="button" name="CreateControl" value="AddControl" id="AddControls" /> 
    <form action="/" method="post" id="dynamicControlForm"> 
    <div id="dynamicControldiv"> 
    </div> 
    <input type="submit" name="DynamicControl" id="btnDynamicSubmit" value="Submit" /> 
    </form> 
</div> 

演示：http://jsfiddle.net/qwuPk/2/