CODEWITHSUNDEEP
jquery
user8152551
user8152551

Reputation:

jQuery dynamic form validation

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 on add button new fields are created and validation doesnt run on them automatically.i have used each loop via ":input.req" where req is the class name i have given to all elements whether static or being created new. Now, in onclick i use this.val() for checking the empty space which doesnt work for new created fields.and when i print value strored in "input.req.val()" it always picks up the value of first field all through the loop how can i apply validation in a way so that 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');
 }

});

Upvotes: 3

Views: 106

Answers (2)

MinimalistYing
MinimalistYing

Reputation: 356

Try the code below, hope this is what you want.

   $(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's 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');
     }

   });

I use the class of the input to determine which Regexp to test value, and if any value is wrong, it will just break the $(':input.req').each()loop, and then disable the button.

Upvotes: 1

abhi nagi
abhi nagi

Reputation: 19

$(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"){}
})

you can trigger all the input fields at once (all the input fields on the page will be validated. to avoid that use some class on input field and check them like this).

Upvotes: 0

Related Questions