add class name using javascript

Asked Oct 27 '16 at 01:34

Active Oct 27 '16 at 01:54

Viewed 43 times

How to add class on a textbox if its empty? I am using getmdl.io framework. What I want to do is when the textbox is empty I want to add a class which is (is-focused, is-invalid and is-dirty)

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="fn">
     <input class="mdl-textfield__input" type="text" id="fullname" name="fullname" autocomplete="off">
     <label class="mdl-textfield__label" for="fullname">Full name</label>
</div>

and this is my javascript code when the submit button is click.

function validate () {
    var f = _('fullname').value;
    if (f == "") {
        _('fn').className += " is-invalid";
    }
}

edited Oct 27 '16 at 01:54

asked Oct 27 '16 at 01:34

pal3

What is `_`? An external library? – Andrew Li Oct 27 '16 at 01:35
_() function return getElementById(element) – pal3 Oct 27 '16 at 01:36
This is trivial. `_('foo').className = x`. It seems maybe the issue is knowing the right time to add the class, but your question doesn't explain when that would be. – Tibrogargan Oct 27 '16 at 01:37
I don't understand. You add class `is-focused` but then check `f` is empty, then add it again? – Andrew Li Oct 27 '16 at 01:39
@AndrewLi it supposed to be `is-invalid` – pal3 Oct 27 '16 at 01:52

add class name using javascript

0 Answers0