how to add validations on a dynamic table-CodePudding

I got stuck in my code , I am creating a dynamic form on age and put unobtrusive client-side validation. validation is working but not working row-wise, its working like when I change first-row validation then it removes other rows validation.

This is my HTML:

 <div >
                <label>Age</label>
                <input type="number"  id="p_age" name="age" required onkeyup="dob_police()" value="<?php echo $row['age']; ?>">
                <small id="wrong_dob_alert"></small>
              </div>

This is my Script:

<script>
  function dob_police(){
    var age = document.getElementById('p_age').value;

    if(age < 20){
          document.getElementById('wrong_dob_alert').style.color = 'red';
          document.getElementById('wrong_dob_alert').innerHTML = 'Age must be 20 above';
          }
          else{
          document.getElementById('wrong_dob_alert').style.color = 'green';
          document.getElementById('wrong_dob_alert').innerHTML = '✓';
          }
  }

</script>

CodePudding user response：

You could pass the this object ref to the given DOM element onkeyup="dob_police(this)" and grab it's value and the sibling element which applies the validation styling. You can remove the ID as well, given it will not be unique.

function dob_police(tempThis){
    var age = tempThis.value;

    if(age < 20){
        tempThis.nextElementSibling.style.color = 'red';
        tempThis.nextElementSibling.innerHTML = 'Age must be 20 above';
     }
     else{
        tempThis.nextElementSibling.style.color = 'green';
        tempThis.nextElementSibling.innerHTML = '✓';
     }
}

CodePudding user response：

This might be overengineered but just to give you an idea how you could make it fully customizable in HTML with a JSON data attribute..

var ageMinimumValidator = function(item, notificationElement, validationRules, event) {
    notificationElement.classList.remove('error', 'valid');
    if(parseInt(validationRules.values.min, 10) < event.target.value) {
        notificationElement.classList.add('valid');
        notificationElement.innerHTML = validationRules.validMessage;
    } else {
        notificationElement.classList.add('error');
        notificationElement.innerHTML = validationRules.errorMessage;
    }
};

[...document.querySelectorAll('.form-group')].forEach( item => {
    
    let inputElement = item.querySelector('[data-validator]');
    let validationRules = JSON.parse(inputElement.dataset.validator);
    let notificationElement = item.querySelector('.notification');
    
    validationRules.events.forEach( validationEvent => {
        inputElement.addEventListener(
            validationEvent,
            (event) => {
                window[validationRules.function](
                    inputElement,
                    notificationElement,
                    validationRules,
                    event
                )
            }
        );  
    })
      
});

.error {
    color: red;
}

.valid {
    color: green;
}

<div >
  <label>Age</label>
  <input type="number"  name="age" required value=""
   data-validator='{"function":"ageMinimumValidator", "values":{"min": "20"}, "errorMessage":"Age must be 20 above", "validMessage":"✓", "events": ["keyup", "mouseleave"]}'>
  <small ></small>
</div>