All geek questions in one place

Validation does not work for dynamically generated values

I created a form along with dynamically created form fields (name, age). When trying to check my age field using javascript, only the first record of the age field is checked - others are not.

The code:

<script type="text/javascript">

  function formValidator(){
     var age = document.getElementById('age');

   if(isNumeric(age, "Please enter a valid Age")){

     return true;

    }
   return false;
     }

    function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
       return true;
      }else{
  alert(helperMsg);
     elem.focus();
 return false;
    }
  }

HTML code:

    <html>
      < body>
      <div style="padding-left:70px;"> 
   <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
   <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
   </div>
   </p>
   <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
   <tbody>
   <tr>
     <p>
   <td><input type="checkbox" name="chk[]" checked="checked" /></td>
    <td>
    <label>Name</label>
   <input type="text" size="20" name="name[]" id="name"   >
    </td>
     <td>
  <label>Age</label>
  <input type="text" size="20" name="age[]" id="age"  >
     </td>

     </p>
   </tr>
   </tbody>
  </table>
  <div class="clear"></div>

    </body>
    </html>

Only the first field is checked. How can I check dynamically generated fields?

+4
source share
4 answers

You have duplicate identifiers for a form element. which targets only the first element corresponding to the ID. You must use the same class and configure them for validation. specify the age of the class instead of id, and then use:

function formValidator(){
var age = document.getElementsByClassName('age');
for (var i = 0; i< age.length; i++) {
   if(!isNumeric(age[i], "Please enter a valid Age")){
    return false;
  }
}
return true;
}
0

, javascript,

:

  for(i=0;i<results;i++) 
  {            

    <input type="text" size="20" name="age[]" id="age"<?php echo i; ?>  >

   }

javascript .

0

. .

function formValidator(){
    var ageEls = document.getElementsByName('age[]'),
        valid = true,
        i = 0;

    while (i < ageEls.length && valid) {
        valid = isNumeric(ageEls[i], "Please enter a valid Age");
        i++;
    }
    return valid;
}

JSFiddler: http://jsfiddle.net/3zsLhe9c/3/

0

. getElementById DOM, .

var age = document.getElementById('age');

DOM, value.

var age = document.getElementById('age').value;

, .

0

Source: https://habr.com/ru/post/1570294/

More articles:


All Articles