How to remove specific class from input with multiple classes in javascript?

Question

I would like to check if the input has any character in it, then I sould add an active class to it and when it's empty then I should remove the active class. It's working only if the input only has the active class. Could you help me to improve my code to be able to remove ONLY the active class even if it has more?

<div class="input-group">
    <input type="text" id="lastname" onblur="checkInput(this)" />
    <label for="lastname" class="required">Lastname</label>
</div>

<div class="input-group">
    <input type="text" id="invalid" class="invalid" onblur="checkInput(this)" />
    <label for="invalid">Firstname</label>
</div>

<script>
    var checkInput = function(input) {
        if (input.value.length > 0) {
            input.className = 'active';
        } else {
            input.className = '';
        }
    };
</script>

`input.classList.add(...)` and `input.classList.remove(...)` are better alternatives — haim770, Oct 10 '18 at 11:06
https://developer.mozilla.org/de/docs/Web/API/Element/classList — yunzen, Oct 10 '18 at 11:10

shakogele · Accepted Answer · 2018-10-10T11:14:39.503

1

Use onChange event handler instead of onblur Check the link use

input.classList.add('active')
input.classList.remove('active')

edited Oct 10 '18 at 11:14

answered Oct 10 '18 at 11:10

shakogele

409
4
14

Did you readed question? – Mohammad Oct 10 '18 at 11:11
Updated Code and answer now check please – shakogele Oct 10 '18 at 11:14

How to remove specific class from input with multiple classes in javascript?

1 Answers1