Unable to add jQuery validation for dynamically generated input fields?

Question

I have a few input fields which are generated dynamically upon a button click based on the click event in jQuery. I am trying to add client side validation to those input fields.

But the problem is, as the user can add any number of input fields dynamically, the id & name of the input fields are different. It's done that way so as to fetch values in server side easily.

So on the first click, the id & name of the input fields will be company_name0, emp0, offc_email0 respectively. On the second click it will add a new set of input fields along with the already existing fields & the name & id will become company_name1, emp1, offc_email1 & so on.

Validation code:

$('#frm_members').validate(
 {
  rules: {
    company_name: {
         required: true
      }, 
     emp :{
          number:true
     },

    offc_email:{
        email: true
    }
   }
});

Here's a fiddle which contains a partial working demo & has html & other necessary jquery code necessary for dynamic generation of fields.

Sadikhasan · Accepted Answer · 2015-03-14 08:24:09Z

1

You need to following code click function

$("#add_company_div"+ i +" .input-sm").each(function(){
    $(this).rules("add", {
          required: true
    });
});

Demo

Edit

$("#add_company_div" + i+" .input-sm").each(function(){
      if($(this).attr("id").indexOf("company_name")>=0)
       {
           $(this).rules("add", {
              required: true
            });
       }
});

Demo

edited Mar 14, 2015 at 8:24

answered Mar 14, 2015 at 7:59

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

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

2 Comments

version 2 Over a year ago

What if I want to add validation to only one input field in the form, say.. company_name? @Sadikhasan

version 2 Over a year ago

Awesome. Fantastic. Excellent.

Hamix · Accepted Answer · 2015-03-14 07:26:42Z

1

in add button click event :

$("form").on("click", "#add_company", function (e) {    
    $('.addcomp').each(function () {
        $(this).rules("add", {
            required: true
        });
    });
});

good luck

answered Mar 14, 2015 at 7:26

Hamix

1,3357 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unable to add jQuery validation for dynamically generated input fields?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related