JQuery dynamic form validation

Question

working js fiddle: http://jsfiddle.net/dofpezeg/ This is a dynamic form where I have to apply validation. The problem I am facing is that when I click the add button, new fields are created and they are not checked automatically. I used each loop through ": input.req", where req is the class name that I gave to all the elements, whether static or created new ones. Now, in onclick, I use this.val () to check for empty space that doesn't work for newly created fields. And when I print the value stored in "input.req.val ()", it always selects the value of the first field all through the loop, how can I apply validation so that the new fields are also validatd not only for empty, but also for regular expressions

      $(document).on('click', '#btnac', function() {
 var empty = false;
 $(':input.req').each(function() {
   console.log($(':input.req').val());
   var cbn = $('.newcbn').val();
   var cba = $('.newcba').val();
   var cban = $('.newcban').val();
   var cbic = $('.newcbic').val();
   var cuser = $('#cuser').val();
   alert($(':input.req').val());

   if ($(this).val() === '') {
     empty = true;
   } else if (/^[a-zA-Z ]+$/.test(cbn) === false) {
     empty = true;
   } else if (/^[a-zA-Z ]+$/.test(cba) === false) {
     empty = true;
   } else if (/^[0-9]+$/.test(cban) === false) {
     empty = true;
   } else if (/^[A-Za-z]{4}\d{7}$/.test(cbic) === false) {
     empty = true;
   } else if (/^[0-9]+$/.test(cuser) === false) {
     empty = true;
   } else {
     empty = false;
   }

 });
 if (empty) {
   $('#btnac').attr('disabled', 'disabled');

 } else {
   $('#btnac').removeAttr('disabled');
 }

});

Answer 1

, , , .

   $(document).on('click', '#btnac', function() {
     var empty = false;
     $(':input.req').each(function() {
       var val = $(this).val();// the value of the input on current loop index
       var $this = $(this);

       if (val === '') {// if value is empty
         empty = true;
       } else if ($this.hasClass('newcbn')) {// test use different Regexp according to the form input class
         empty = !/^[a-zA-Z ]+$/.test(val);
       } else if ($this.hasClass('newcba')) {
         empty = !/^[a-zA-Z ]+$/.test(val);
       } else if ($this.hasClass('newcban')) {
         empty = !/^[0-9]+$/.test(val);
       } else if ($this.hasClass('newcbic')) {
       console.info(val)
         empty = !/^[A-Za-z]{4}\d{7}$/.test(val);
       } else if ($this.attr('id') === 'cuser') {// test form $('#cuser')
         empty = !/^[0-9]+$/.test(val);
       } else {
         empty = false;
       }

       if (empty) {// if value didn't pass validate, break loop and disable button #btnac
         return false;
       }

     });

     if (empty) {
       $('#btnac').attr('disabled', 'disabled');

     } else {
       $('#btnac').removeAttr('disabled');
     }

   });

, Regexp , - , $(':input.req').each(), .

Answer 2

$(document).on('click', '#btnac', function() {
 var empty = false;
 $('input').on('change', function(e){
  input_type =$(this).attr('type')
  if(input_type == "text"){}
  else if(input_type == "number"){}
  else if(input_type == "textarea"){}
})

( , - ).