You have an option to do this "check" with only CSS used to pseudo-class :placeholder-shown . So you will not even need to insert a class .active into the label, since the check is in input + label by css
It works like this:
If input has a placeholder active, that is, if input is empty only with placeholder , usually the label that follows will have red text for example.
However, if something is written inside input , that is, if placeholder is NOT active (because it will have something written inside), the color of label is green.
See the example below to understand better:
input:placeholder-shown + label {
color: red;
}
input:not(:placeholder-shown) + label {
color: green;
font-weight: bold;
}
Escreva algo nesse input<br>
<input type="text" placeholder="com placeholder / sem value" value="" name="" id="app">
<label for="app">Vai trocar de cor quando preencher input</label>
<br>
<br>
<br>
Esse input já tem um valor no value<br>
Apague o texto do input!<br>
<input type="text" placeholder="meu placeholder" value="sem placeholde / com value" name="" id="app">
<label for="app">Já está sem o placeholder então é verde</label>
OBS 1: This is not a native implementation of Bootstrap Material, but as you saw it can be easily deployed.
OBS 2: No works in IE and Edge link
