Validate Dynamically Added Input fields

Question

I have used this jquery validation plugin for the following form    lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt script type  text javascript  src  http   jzaefferer github com jquery-validation jquery validate js  gt  lt  script gt    lt script gt        document  ready function                commentForm   validate                 function addInput             var obj   document getElementById  list   cloneNode true           document getElementById  parent   appendChild obj          lt  script gt    lt form id  commentForm  method  get  action    gt       lt p id  parent  gt           lt input id  list   class  required    gt       lt  p gt        lt input class  submit  type  submit  value  Submit   gt       lt input type  button  value  add  onClick  addInput      gt   lt  form gt    When the add button is clicked a new input is dynamically added  However when the form is submitted only the first input field is validated  How can i validate dynamically added inputs   Thank you

User · Answer

The one mahesh posted is not working because the attribute name is missing:

So instead of

<input id="list" class="required"  />

You can use:

<input id="list" name="list" class="required"  />

Modified version

User · Answer

In regards to  RitchieD response  here is a jQuery plugin version to make things easier if you are using jQuery    function              fn initValidation   function                 this  removeData  validator              this  removeData  unobtrusiveValidation              validator unobtrusive parse this            return this            jQuery      This can be used like this       SomeForm   initValidation

User · Answer

In case you have a form you can add a class name as such    lt form id  my-form  gt     lt input class  js-input  type  text  name  samplename    gt     lt input class  js-input  type  text  name  samplename    gt     lt input class  submit  type  submit  value  Submit    gt   lt  form gt    you can then use the addClassRules method of validator to add your rules like this and this will apply to all the dynamically added inputs     document  ready function         validator addClassRules  js-input         required  true            validate the form       my-form   validate

User · Answer

jquery validation plugin version work fine v1 15 0 but v1 17 0 not work for me     document  find   add patient form   validate             ignore                rules                email                                 required true                                                       messages                email                                  required   Required

User · Answer

You should have  name  attribute for your inputs  You need to add the rules dynamically  one option is to add them when the form submits   And here is my solution that I ve tested and it works    lt script type  text javascript  gt       document  ready function             var numberIncr   1     used to increment the name for the inputs          function addInput                     inputs   append     lt input class  comment  name  name  numberIncr      gt                  numberIncr                          form commentForm   on  submit   function event                    adding rules for inputs with class  comment                 input comment   each function                       this  rules  add                                                  required  true                                                                    prevent default submit action                      event preventDefault                    test if form is valid              if    form commentForm   validate   form                      console log  validates                  else                   console log  does not validate                                         set handler for addInput button click             addInput   on  click   addInput               initialize the validator            form commentForm   validate               lt  script gt    And the html form part    lt form class  commentForm  method  get  action    gt       lt div gt            lt p id  inputs  gt                   lt input class  comment  name  name0    gt           lt  p gt        lt input class  submit  type  submit  value  Submit    gt       lt input type  button  value  add  id  addInput    gt        lt  div gt   lt  form gt    Good luck  Please approve answer if it suits you

User · Answer

You need to re-parse the form after adding dynamic content in order to validate the content     form   data  validator   null     validator unobtrusive parse    form

User · Answer

lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  https   cdn jsdelivr net npm jquery-validation 1 17 0 dist jquery validate js  gt  lt  script gt    lt script gt        document  ready function                commentForm   validate                 function addInput              var indexVal       index   val            var index   parseInt indexVal    1         var obj     lt input id  list  index    name list   index     class  required    gt               parent   append obj                list  index  rules  add    required                index   val index         lt  script gt    lt form id  commentForm  method  get  action    gt       lt input type  hidden  name  index  name  list 1   id  index  value  1  gt       lt p id  parent  gt           lt input id  list1   class  required    gt       lt  p gt       lt input class  submit  type  submit  value  Submit   gt       lt input type  button  value  add  onClick  addInput      gt   lt  form gt

User · Answer

Reset form validation after adding new fields   function resetFormValidator formId          formId  removeData  validator          formId  removeData  unobtrusiveValidation          validator unobtrusive parse formId

User · Answer

Try using input arrays    lt form action  try php  method  post  gt       lt div id  events wrapper  gt           lt div id  sub events  gt               lt input type  text  name  firstname      gt                                                  lt  div gt       lt  div gt       lt input type  button  id  add another event  name  add another event  value  Add Another    gt       lt input type  submit  name  submit  value  submit    gt   lt  form gt    and add this script and jQuery  using foreach   to retrieve the data being   POST ed    lt script gt                                                                                            document  ready function                add another event   click function            var  address       sub events            var num       clonedAddress   length     there are 5 children inside each address so the prevCloned address   5   original         var newNum   num   1          var newElem    address clone   attr  id    address    newNum  addClass  clonedAddress               set all div id s and the input id s         newElem children  div   each  function  i                this id    input     newNum 5   i                        newElem find  input   each  function                  this id   this id   newNum              this name   this name   newNum                       if  num  gt  0                    clonedAddress last   after newElem             else                address after newElem                          btnDel   removeAttr  disabled                             remove   click function                           lt  script gt

User · Answer

form-btn   click function        set global rules  amp  messages array to use in validator    var rules          var messages         get input  select  textarea of form        formId   find  input  select  textarea   each function            var name     this  attr  name          rules name              messages name               rules name     required  true      set required true against every name   apply more rules  you can also apply custom rules  amp  messages       if  name      email              rules name  email   true             messages name  email    Please provide valid email                 else if name    url            rules name  required   false     url filed is not required   add other rules  amp  messages                  submit form and use above created global rules  amp  messages array        formId   submit function  e                e preventDefault               validate               rules  rules              messages  messages              submitHandler  function  form                console log  validation success

[javascript] Validate Dynamically Added Input fields

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jquery-validate