form validation for multiple inputs created dynamically using array variables

Question

Here is my javascript code

<script type="text/javascript">
//function to add new row
jQuery(function() {
  var counter = 1;
  var nextRowId=($('#tb tr').length)-1;
 //number of rows fetched from database
  jQuery('a.addrow').click(function(event) {
    event.preventDefault();

    var newRow = jQuery('<tr><td colspan="3" class="table-active">'+nextRowId+'</td><td colspan="3" class="table-active"><input type="number" name="emp_code[' + nextRowId + ']" id="emp_code[' + nextRowId + ']"  class="form-control"/><div class="error"><?php echo $genderError;?></div></td><td colspan="3" class="table-success"><input type="text" name="emp_name[' + nextRowId + ']" id="emp_name[' + nextRowId + ']" class="form-control" required/></td><td colspan="3" class="table-info"><input type="text" name="emp_mailid[' + nextRowId + ']" id="emp_mailid[' + nextRowId + ']" class="form-control" required/></td><td colspan="3" class="table-info"><select required class="form-control" id="nomination[' + nextRowId + ']" name="nomination[' + nextRowId + ']"> <option value="">Select</option><option value="Nominated">Nominated</option><option value="Invited">Invited</option><option value="Both">Both</option><option value="None">Neither nominated nor invited</option></select></td><td colspan="3"><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="1" required>Yes</label><label><input type="radio" name="attendance[' + nextRowId + ']" id="attendance[' + nextRowId + ']" value="0">No</label></td><td><a href="javascript:void(0);" class="remove" onclick=><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
    counter++;
     nextRowId++;
    jQuery('table.table').append(newRow);
     $('#emp_code['+ nextRowId + ']').rules('add',{
       required:true,
     });
  //Init bootstrapToggle
  $('.toggleone').bootstrapToggle({
    on: 'Yes',
    off: 'No'
  });
  });
}); 

</script>

I would like to validate all the values inputed clicking on submit button using various constraints `

• emp_code[]`:required and number emp_name[]:required and only alphabets emp_mailid[]:required and email validation nomination[]:required attendance[]:required

I tried all the solutions from SO none worked out.Am i wrong somewhere.I want this to do with jquery. Someone help me do this

Answer 1

Maybe this could help.

HTML pattern Attribute

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

Answer 2

If you want it on jquery maybe you should try this.

 $('.txtOnly').bind('keyup blur',function(){ var node = $(this); node.val(node.val().replace(/[^az]/g,'') ); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="lorem" class="txtOnly">