How to dynamically append classes

Question

It's been some years since I have had to do DOM manipulation with CSS and vanilla JavaScript.

I have an input element some default css that is being added to its wrapping div and not the input element itself like so:

<div class="field animated-label text required"> <label class="control-label" for="answer">Answer</label> <input class="form-control" /> </div>

So the default css for this input element is dictated by this selector:

.rds-form .animated-label { border: 2px solid #ccc; border-radius: 2px; color: #767676 display: block; min-height: 40px; position: relative; }

However when the user clicks out of the input element not having typed anything in, this selector gets appended on to give a red error border around the input element:

.rds-form .field-group.error, .rds-form .field.text.error, .rds-form .field.select.error, .rds-form .field.textarea.error { border: 2px solid #cc2233; position: relative; }

How would this be handled in JavaScript? I am assuming this is handled by some JavaScript logic.

Does this answer your question? Vanilla JavaScript adding classes to elements — kmoser
– kmoser, Commented Aug 23, 2020 at 17:22
If you are seeing that the CSS rule is not getting triggered (upon adding/removing classes) have a look at this: stackoverflow.com/questions/22093141/… — Rahul Bharadwaj
– Rahul Bharadwaj, Commented Aug 23, 2020 at 17:24

kmoser · Accepted Answer · 2020-08-23 17:31:14Z

Add two handlers to the <input> field:

// When the input field has focus, remove the 'error' class from .animated-label: document.querySelector('input').addEventListener('focus', function(e) { document.querySelector('.animated-label').classList.remove('error'); }); // When the input field loses focus, determine whether to add or remove the 'error' class: document.querySelector('input').addEventListener('blur', function(e) { if (e.target.value.match(/^\s*$/)) { // Input is empty document.querySelector('.animated-label').classList.add('error'); } else { document.querySelector('.animated-label').classList.remove('error'); } });

It matches a string that is either empty ('') or contains just whitespace: ^ means beginning of string; \s* means zero or more whitespace chars (space, tab, or newline); $ means end of string. stackoverflow.com/a/19121435/378779

Collectives™ on Stack Overflow

How to dynamically append classes

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related