After setting up validation on a form and looking into previous answers, I have come across the following solution:
CSS
.required_field {
border-style: solid;
border-color: red;
}
Whenever a field is empty or null, I am adding the class:
JavaScript
$('#new_name').addClass('required_field');
I have tested this class on a div and it adds the border correctly. However, when applied to an input box, it does not change the border color.
HTML
<form>
<input type="text" id="new_name" name="new_name">
<input type="submit">
</form>
While the class is being added, the border color of the input box remains unchanged. What could be causing this issue?
ANSWER
The problem was that the input element already had existing CSS rules affecting its appearance, preventing the new class from taking effect as expected.
By adding !important at the end of each rule in the required_field class (as suggested in the comments), the override forced the border color to change as intended.