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

The color input click event does not work properly when triggered within a context menu event

Even after being removed from the DOM using Ajax load, JQuery continues to execute

Upon concatenation, the screen automatically returns to the beginning of the page

What could be causing the <img src= ' '/> tag to malfunction in Express?

The npm request was unsuccessful due to a self-signed certificate within the certificate chain causing the failure

What is preventing the listener from activating?

How to create a loop in Selenium IDE for selecting specific values from a drop-down list?

Automated Desk: adjust page through programming

"Revolutionize Your Site with Endless Scrolling using q

Can a single file in NextJS 13 contain both client and server components?

Dynamic drop-down navigation with rearranging menu

Display a loading progress bar with jQuery AJAX as your single page website content loads

Utilizing jQuery to Trigger a Click Event on an Element Without a Class

Node.js: Leveraging Express to Compare URL Parameters and Handle Delete Requests with Array Values

Gulp is showing an error of "Module Not Found" despite the module being present in the project

Securing Email and Password Data in Cypress Tests

Instructions for inserting <tr></tr> after every fourth iteration of <td></td> in the loop

In certain situations, the JavaScript code runs either before or after the print dialog is displayed when using the window

What is the best way to transform this into an HTML readable code?

Having trouble rendering JSON data on a FlatList component in React Native