Jquery adding validate rules on select dynamically created

Question

I'm having trouble making dynamically added inputs required. especially with the "select" input

I have already tried manually checking (wo Jquery validate) if inputs submitted were correct but i encountered the same kind of problem. The "required" class doesn't help either.

Here's the html :

<form id='myform'>
  <div>
    <div id="addRow">+</div>
    <div id="deleteRow">-</div>
  </div>
  <div>
    <table id="tableex">
      <tr>
        <td>
          <select name="selectbox[]" data-selected="" class='selectdyna required'>
        <option value="" selected="selected" disabled="disabled">env :</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        </select>
        </td>
      </tr>
    </table>
  </div>

  <div>
    <input type='submit' value='Validate'>
  </div>
</form>

here's my js:

$(document).ready(function() {
  $("#addRow").click(function() {

    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox[]\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

here's a link to the fiddle: https://jsfiddle.net/v3tj2c5u/

Answer 1

I don't understand why you require the name of the dropdown that way. You can do it as below demo

$(document).ready(function() {
  $("#addRow").click(function() {
   var count= $("#tableex tr").length+1;
    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox"+count+"\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

Working demo