How to Delete a Class with JavaScript when an Input Event Occurs

After successfully implementing a javascript validation using bootstrap to add the class is-invalid when a field is null, I am now seeking a way to remove that class during the oninput event.

For example:

<input type="text" name="emp_id" id="emp_id" oninput="rmv()">
<input type="text" name="emp_fn" id="emp_fn" oninput="rmv()">

In JavaScript:

function rmv(){
document.getElementsByClassName("is-invalid");
error.oninput = function(){
error.classList.remove('is-invalid');
}}

I have provided a simplified version of the code above. Please be aware that there are multiple text boxes with the validation is-invalid class, and I only want to remove that class from the active textbox I am typing in. Thank you. (newbiee)

Answer №1

To easily remove the "is-invalid" class from an input element, you can use the oninput(this) function without needing to call getElementsByClassName.

The rmv() function utilizes the reference to the input element that has been typed in.

As you type in the input field, the "is-invalid" class will be automatically removed, making this method compatible with multiple elements.

Update: You have the option to check if the input has a value and then decide whether to add or remove the class accordingly.

Live Example:

function rmv(event) {
   event.value ? event.classList.remove('is-invalid') : event.classList.add('is-invalid'); // toggle class based on input value
}
.is-invalid {
  background: red
}
<input type="text" name="emp_id" class="is-invalid" id="emp_id" oninput="rmv(this)">
<input type="text" name="emp_fn" class="is-invalid"  id="emp_fn" oninput="rmv(this)">

Answer №2

Check out this example in action:

function updateValidity(input){
    if(input.value) {
      input.classList.remove('is-invalid');
    } else {
      input.classList.add('is-invalid');
    }
}
.is-invalid {
  border: 2px dashed #ff0000;
  background-color: #ff000011;
}
<input type="text" class="is-invalid" name="user_id" id="user_id" oninput="updateValidity(this)">
<input type="text" class="is-invalid" name="user_fn" id="user_fn" oninput="updateValidity(this)">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The date selection tool is failing to appear on the screen

I successfully created a date picker using Bootstrap. Here is the code: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <s ...

Implementing a filter on retrieved data from an API in a React application

I'm retrieving information from this Api After fetching the data, I need to check if the gender is Male in order to display a Male Icon. How can I perform this check on the Api data and return some HTML data like an img tag or something to show the i ...

What is the method to display a group label using ng-table?

Does anyone have experience creating a group in ng-table? <div> <div ng-controller="ContractsController" style="position: relative;background:whitesmoke; border:1px solid lightgray; border-radius:5px; margin-top:0px; margin-bottom:5px; h ...

Circular dependency in typescript caused by decorator circular reference

Dealing with a circular dependency issue in my decorators, where the class ThingA has a relation with ThingB and vice versa is causing problems for me. I've looked into various solutions that others have proposed: Beautiful fix for circular depende ...

Using intricate document text as the input parameter in Vue: A guide

I am currently working with this Vue code snippet: <script> var starting_point = '{{ form.content.data }}'; vm = new Vue({ el: '#editor', data: { input: starting_point }, computed: { compiledMarkdown: function () ...

Use jQuery to transfer groups of table rows to a newly relocated table data cell

First of all, I appreciate you taking the time to go through this explanation. My current challenge involves using jQuery to move sets of TRs to new positions in a table. While I can easily move the headers, I am facing difficulty with moving the actual da ...

Problems Arise Due to HTA File Cache

My JavaScript function fetches the value of a label element first, which serves as an ID for a database entry. These IDs are then sent to an ASP page to retrieve the save location of images from the database. The save location information for each selecte ...

I'm having trouble with my form submission using AJAX, as it's not echoing

I am currently testing the submission of a form using Ajax (submitting to my own page "new1.php"). What I am aiming for is to have the first and last name echoed after clicking the submit button. However, I am not seeing the first and last name displayed ...

JavaScript interprets a null date as January 1, 1970

My current setup involves using AngularJS to call a web API and store data. However, an issue arises when JavaScript interprets a null date as January 1st, 1970 in the input box. Is there a way to display an empty input box when the date is null? When rea ...

Tips for accessing a file in AngularJS

Can AngularJS be used to read files? I am interested in placing the file within an HTML5 canvas for cropping purposes. I was considering implementing a directive. Below is the JavaScript code that I plan to include in my directive: function readURL(input ...

Easy jQuery Mobile and AJAX login solution

My current project involves creating a mobile app with user login capabilities using PhoneGap, jQuery Mobile, AJAX, and PHP. I am starting with a basic HTML and PHP structure as I am not an experienced programmer, but even my simple user login form is not ...

Passing a variable to a template in Node.js and express with hbs is causing an unexpected identifier error

I’m working on a Node.js Express app, and I’m trying to pass a variable when rendering my index.hbs file, like this: <!DOCTYPE html> <html> <body> Hello. <a href="/auth/facebook">Login with Facebook</a> {{ ...

Issue with Datepicker in Angular Bootstrap: format identifier not being utilized

Check out this Plunk for reference. This is how my controller is set up: app.controller("myController", [ "$scope", function($scope){ $scope.DateFormat = "DD/MM/YYYY"; $scope.From = '15/01/2015'; // DD/MM/YYYY ...

Using jQuery to revert back to the original SRC after mouse is not hovering over an element

I've been working on a script to change the src attribute for an icon. The icon I'm loading is a different color and it's meant to notify the user about the link associated with it. Currently, I have the src changing to the second icon on h ...

Is there a way for my discord bot to notify me when a certain user is playing a particular game?

How can I set up my bot to automatically send a message when a specific user starts playing a specific game, like Left 4 Dead 2? I'm looking for a way to do this without using any commands. // Game Art Sender // if (message.channel.id === '57367 ...

Received error code 400 for a faulty request during the second axios API call

While attempting to retrieve data from an API using Axios, I encountered an issue. The first API call executed successfully, providing expected data. However, the second call resulted in a 400 bad request error. After scouring various forums for a solutio ...

The console in React displays values, but fails to render them on the DOM

I am attempting to dynamically load options for a select element based on another select's value. I pull the data from an array that will eventually contain more information. The issue I am facing is that even though I successfully filter the data, t ...

The React component fails to inherit any props that are passed to it when it is rendered using a logical operator

I'm facing an issue with a component that doesn't seem to receive any props when I use a logical operator in conjunction with it. Oddly enough, if I render the component without the conditional statement, everything works fine. But as soon as I a ...

The top scrolling behavior on click applies exclusively to the first set of Bootstrap 5 tabs

I am experiencing an issue with my HTML webpage that contains multiple BS5 Nav Tabs. The first tab is not functioning properly, while all the other tabs are working smoothly. When I click on the first BS5 Nav Tab, the page scrolls to the top with the addre ...

Can you explain the purpose of the .subscribe() function?

Currently, I am in the process of developing an API using Angular2 and NodeJS. My focus has been on implementing services for my API that are responsible for retrieving a list of tasks and presenting them. Below is the code snippet for the task service: i ...