Tips for implementing validations on a table that changes dynamically

Question

Tips for implementing validations on a table that changes dynamically

I encountered an issue in my code while working on a dynamic form for age with unobtrusive client-side validation. The problem is that the validation is row-wise, but it behaves incorrectly by removing other rows' validations when I change one.

Below is the snippet of my code:

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 = '✓';
          }
}

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

javascript

Answer 1

Answer №1

To enhance the validation process, you can pass the reference of the current object using this to the specific DOM element with the attribute

onkeyup="dob_police(this)"

. By doing so, you can access its value and the adjacent element that displays the validation styling. It is also possible to eliminate the ID since it does not need to 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 = '✓';
     }
}

Answer 2

To enhance the validation process, you can pass the reference of the current object using this to the specific DOM element with the attribute

onkeyup="dob_police(this)"

. By doing so, you can access its value and the adjacent element that displays the validation styling. It is also possible to eliminate the ID since it does not need to 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 = '✓';
     }
}

Answer 3

Answer №2

This could seem like it's going a bit overboard, but here's an example of how you can enhance the customization options using HTML with a JSON data attribute.

var ageValidator = 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 class="form-group">
  <label>Age</label>
  <input type="number" class="form-control form-control-sm" name="age" required value=""
   data-validator='{"function":"ageValidator", "values":{"min": "20"}, "errorMessage":"Age must be 20 above", "validMessage":"✓", "events": ["keyup", "mouseleave"]}'>
  <small class="notification"></small>
</div>

Answer 4

This could seem like it's going a bit overboard, but here's an example of how you can enhance the customization options using HTML with a JSON data attribute.

var ageValidator = 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 class="form-group">
  <label>Age</label>
  <input type="number" class="form-control form-control-sm" name="age" required value=""
   data-validator='{"function":"ageValidator", "values":{"min": "20"}, "errorMessage":"Age must be 20 above", "validMessage":"✓", "events": ["keyup", "mouseleave"]}'>
  <small class="notification"></small>
</div>

Tips for implementing validations on a table that changes dynamically

Answer №1

Answer №2

Similar questions

Tips on extracting the image URL from a canvas element using Selenium in Java and leveraging JavascriptExecutor

Utilizing Ajax to upload various files from separate input sources simultaneously

utilizing the entire string rather than just a portion

What is the best way to extract valid objects from a string in JavaScript?

Choose your location with React: Country -> Province/State -> City?

Passing User Authentication State from Express/Passport to a React Client: A Step-by-Step Guide

Customize URL based on selected button

What other methods are available to verify null and assign a value?

Having numerous bxsliders implemented in a Genesis child theme

JQuery selector is successfully working while vanilla JavaScript is not functioning as expected

Implement the click event binding using classes in Angular 2

Overwriting the responseText from a previous XMLHttpRequest in JavaScript

Looping through elements using JQuery in groups of 2

Retrieve only the most recent input value

HAproxy: unique error handling for OPTIONS and POST requests with 503 errorfile

Sending an array as a query string

What is the process for adding submitted data to an already-existing local JSON file?

What are the best practices for dynamically handling variables in JavaScript?

Utilize JavaScript to parse and retrieve specific data from an SVG file in XML format

Troubleshooting problems with Window.postMessage()