Form validation, colour not changing
https://codepen.io/Aman-sghh/pen/xxyzNqx
Im trying to change the colour of input fields to red and green based on the user's password and but idk what Im doing wrong. Can you please help me?
5 Replies
Hi, Aman! Specifcity and order are the key here
.form-group input.incorrect {
border: 2px solid red;
}
.form-group input.correct {
border: 2px solid green;
}
Like this it works. What was happening was class + element have higher specificity than only class
I think it's important you take the class incorrect from the element when you add correct (and the other way around).
Ah yes it works now
thanks
🤘
btw the green border is on by default.
As you are using “required” on your form fields you could just use the pseudo class selector “:invalid”. This would also remove the need for the JavaScript, unless you are doing more than just checking that the fields have content.