Is it possible to develop a function that can verify various input values and modify their appearance as needed?

Question

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

I am currently working on creating a form and faced with the challenge of simplifying my code using a function. Specifically, I want to write JavaScript code that will check all input fields in the form to ensure they are filled. If any field is left empty, I'd like to change the style of that input box to display a red color. I have successfully implemented this for text inputs, but I'm wondering if there's a more efficient way to loop over all inputs and apply this functionality. Additionally, I'm open to suggestions on how to handle spans within the form elements, so any insight or examples would be greatly appreciated.

but.addEventListener("click", () => {
    if (firstname.value == "" || lastname.value == "") {
        
        firstname.style.backgroundColor = "rgba(200,0,0,.4)";
        lastname.style.backgroundColor = "rgba(200,0,0,.4)";
        span.style.display = "block";
        span.innerHTML = "Please enter a valid Name";
    }
    if (age.value == ""){
        span.style.display = "block";
        age.style.backgroundColor = "rgba(200,0,0,.4)";
        span.innerHTML = "Please enter your age";
    }  if (isNaN(age.value) == true ){
        span.style.display = "block";
        age.style.backgroundColor = "rgba(200,0,0,.4)";
        span.innerHTML = "Please enter a valid Age";
    }  if (job.value == "") {
        span.style.display = "block";
        job.style.backgroundColor = "rgba(200,0,0,.4)";
        span.innerHTML = "Please enter a role";
    }  if (email.value == "") {
        span.style.display = "block";
        email.style.backgroundColor = "rgba(200,0,0,.4)";
        span.innerHTML = "Please enter an email";
    }  if (phone.value == "") {
        span.style.display = "block";
        phone.style.backgroundColor = "rgba(200,0,0,.4)";
        span.innerHTML = "Please enter phone number";
    }
    
})

javascript loops for-loop input simple-form

Answer 1

Answer №1

If you're looking to validate elements using a loop, this code snippet should do the trick for you.

The function `validateInputs` accepts an array of elements (`inputCollection`) to be validated and an error span as a placeholder. It checks if the input value matches the default value specified in the `data-default` attribute, and if not, appends the error message from the `data-errormessage` attribute to the error span.

function validateInputs(inputCollection, errorspan){
    for(let i = 0; i < inputCollection.Length; i++){
        let defaultValue = inputCollection[i].getAttribute('data-default');
        let errorMessage = inputCollection[i].getAttribute('data-errormessage');
        if(inputCollection[i].value === defaultValue || (!isNaN(defaultValue) && isNaN(inputCollection[i].value))){
            errorspan.innerHTML += `${errorMessage}`; 
        }          
    }
}

This implementation avoids adding styles via JavaScript and suggests using CSS instead for styling purposes.

Update 1

In response to your queries:

- The `data-default` attribute represents the default values (e.g., empty string for name, number for age).

- The `data-errormessage` attribute stores detailed error messages corresponding to each input element.

To clarify the functionality, see the following snippet:

document.getElementsByTagName('button')[0].addEventListener('click', function(){
    var col = document.querySelectorAll('input[data-default]');

    for(let i = 0; i < col.length; i++){
        let defaultValue = col[i].getAttribute('data-default');
        if(col[i].value === defaultValue || (!isNaN(defaultValue) && isNaN(col[i].value))){
            col[i].classList.add('hasError');
        }else if(col[i].classList.contains('hasError')){
            col[i].classList.remove('hasError');
        }          
    }
});

.errormessage{
   display: none;
}
.hasError{
   background:#f00;
}

.hasError + span.errormessage{
   display:block;
}

<form>
    <div>
        <input type='text' data-default="0" name='age' />
        <span class='errormessage' >some error message for the age</span>
    </div>
    <div>
       <input type='text' data-default="" name='name' />
       <span class='errormessage' >some error message for the name</span>
    </div>
</form>
<button>validate</button>

Answer 2

If you're looking to validate elements using a loop, this code snippet should do the trick for you.

The function `validateInputs` accepts an array of elements (`inputCollection`) to be validated and an error span as a placeholder. It checks if the input value matches the default value specified in the `data-default` attribute, and if not, appends the error message from the `data-errormessage` attribute to the error span.

function validateInputs(inputCollection, errorspan){
    for(let i = 0; i < inputCollection.Length; i++){
        let defaultValue = inputCollection[i].getAttribute('data-default');
        let errorMessage = inputCollection[i].getAttribute('data-errormessage');
        if(inputCollection[i].value === defaultValue || (!isNaN(defaultValue) && isNaN(inputCollection[i].value))){
            errorspan.innerHTML += `${errorMessage}`; 
        }          
    }
}

This implementation avoids adding styles via JavaScript and suggests using CSS instead for styling purposes.

Update 1

In response to your queries:

- The `data-default` attribute represents the default values (e.g., empty string for name, number for age).

- The `data-errormessage` attribute stores detailed error messages corresponding to each input element.

To clarify the functionality, see the following snippet:

document.getElementsByTagName('button')[0].addEventListener('click', function(){
    var col = document.querySelectorAll('input[data-default]');

    for(let i = 0; i < col.length; i++){
        let defaultValue = col[i].getAttribute('data-default');
        if(col[i].value === defaultValue || (!isNaN(defaultValue) && isNaN(col[i].value))){
            col[i].classList.add('hasError');
        }else if(col[i].classList.contains('hasError')){
            col[i].classList.remove('hasError');
        }          
    }
});

.errormessage{
   display: none;
}
.hasError{
   background:#f00;
}

.hasError + span.errormessage{
   display:block;
}

<form>
    <div>
        <input type='text' data-default="0" name='age' />
        <span class='errormessage' >some error message for the age</span>
    </div>
    <div>
       <input type='text' data-default="" name='name' />
       <span class='errormessage' >some error message for the name</span>
    </div>
</form>
<button>validate</button>

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

Answer №1

Similar questions

An issue occurred while attempting to utilize fs.readFileSync

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify

Error message: Unexpected token "(" in the asynchronous aspect of Meteor

Ensuring the node array is easily accessible within the view

Experimenting with the input type generated by the Form Helper tool

Tips for Elevating State with React Router Version 6

Route creation unsuccessful while attempting to both download a file and send a response message, resulting in the error "Headers cannot be set after they have been sent to the client."

There was an issue locating the moment/ts3.1-typings/moment module

Refreshing the browser does not load the Angular2 component and instead shows a 404 error

What is the best way to ensure that the Next.js app listener is attached before the 'load' event of the window is triggered?

Leveraging Vue js components while utilizing it from a content delivery network (CDN

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

Next.js server component allows for the modification of search parameters without causing a re-fetch of the data

How come my useEffect still contains outdated data?

Using the setTimeout function is essential for successfully extracting values in a Jquery each loop. Without

Learn the trick to make this floating icon descend gracefully and stick around!

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Mongoose Exception: Question does not have a constructor

Unbind a prepared statement in a node.js environment using SQL

An effective way to connect the ng-model of a <select> element with ng-options within an ng-repeat loop