3

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

});

Improve this question
1
  • Can you please refactor your Js fiddle to just have minimal code to reproduce the issue. Right now its too much there.. Commented Aug 21, 2017 at 11:58

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

well tried sir but it wont solve my main problem ..suppose user clicks on add button 4 new fields come now user clicks directly on submit button then form gets submitted with 4 empty fields this is due to the fact we are using $(this).val() for checking empty
one more thing when i do (":input req").val();it always contains the value of first field of form throughout the loop i got it printed and checked this ...any suggestio on how to check the value of new field generated on clicking add button
@bhrdwj.ysh Maybe you can use an array to save the form generated by click add button, and validate input through the array.But this is not efficient. I don't really understand why you want use $(':input req').val()to test first field of form. I mean that if use $(this).val() to test form, any value didn't pass validate will make submit button disabled.What's wrong about using $(this).val() to check empty? I think this code will make sure that every input of $(':input req') shouldn't be empty, if any value is empty, the submit button will be disabled.
0 
$(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).

Improve this answer

1 Comment

You are binding a new change event listener every single time the button is clicked on. This is extremely inefficient.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.