Min characters/znaków w input przy tym zmiana klasy

Question

Mam taki skrypt
 

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"

w inpucie wpisany, super ze ogranicza mi input ale chcialbym zrobic tak
ze przy nie spelnieniu tego warunku patternu jest klasa "is-danger" a gdy sie spelni bedize klasa "is-success"
W jaki sposób to zrobic w tym js?

Answer 1

Można to zrobić samym CSS-em za pomocą pseudo-klas :valid i :invalid

Pytanie, czy to musi być JS? Tam trochę więcej klepania kodu

Comments

Dzieki, nie znałem po prostu takich klas :D

---

Jednak coś nadal mi nie śmiga :C
Dodałem prostą stylizacje tego
a tak wyglada moj input caly
 

          <input class="input" type="password" name="password_2" placeholder="Confirm password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">

A warunek spełnia gdy co kolwiek sie napisze nawt.

---

a jak wygląda css?

---

input:valid { background-color: red;}
input:invalid { background-color: blue;}