Проверка 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> 

Изображение:

Ссылка

Link - http://jsfiddle.net/qwuPk/1/

Link2

http://jsfiddle.net/LtAy5 Я добавил код выпадающего, радио и флажок

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/