Removing class name on input focus

Question

Removing class name on input focus

I am currently developing a complex multi-form using bootstrap. Within my validateForm function, I have incorporated logic to add an "Invalid" class if the input value is empty, indicating that the user has not entered any information.

When the user clicks on the next button, the input field will display a reddish background color, signifying that it requires input.

My question is, how can I remove the "Invalid" class in two scenarios:

When the user starts typing in the input field

OR

When the user clicks or focuses on the input field

This action should reset the background color back to its original state.

Here is the JavaScript code snippet:

function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) {
    if (y[i].value == "") {
        y[i].className += " invalid";
        valid = false;
    }
}
if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; }
return valid;
}

And here is the relevant CSS code:

input.invalid {
    background-color: #ffdddd;
}

Your help and guidance are highly appreciated!

javascript

Answer 1

Answer №1

Here is a similar example:

const allInputs = document.querySelectorAll("input");
allInputs.forEach(function(input) {
    input.addEventListener("focus", function(event) {
        input.classList.remove("error");
    });
    input.addEventListener("input", function(event) {
        input.classList.remove("error");
    });
});

Answer 2

Here is a similar example:

const allInputs = document.querySelectorAll("input");
allInputs.forEach(function(input) {
    input.addEventListener("focus", function(event) {
        input.classList.remove("error");
    });
    input.addEventListener("input", function(event) {
        input.classList.remove("error");
    });
});

Removing class name on input focus

Answer №1

Similar questions

Multiple jQuery load() requests are being triggered by calling it from within the ajaxComplete() callback

Using jQuery to slide in dynamically generated content

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Struggling to implement nested routes with react-router-dom version 5.2.0?

Dawn Break Alarm Timepiece - Online Platform

Refreshing the package using Bower

My child template in Angular UI is not loading properly due to the presence of multiple views when the URL changes

Which regular expression can match both the start and finish of a string?

I am curious if there exists a VSCode plugin or IDE that has the ability to show the dependencies of TypeScript functions or provide a visual representation

updating the content of a webpage using innerHTML on Squarespace platform

What is the reason for receiving an undefined value when calling getInitial

anchor text substitution for hyperlink

Please make another request in 1 minute using an observable

Verifying the visibility of an element

Issues with AngularJS email validation specifically related to domain names are causing errors

What is the best way to perform a deep sumBy operation with lodash?

Is a Selenium loop a viable option?

What is the best way to emphasize a link to the current page in vue.js?

Does element.click() in Protractor's Webdriver method return a promise, or is there a way for it to handle errors?