MikDra1• 6,010
@MikDra1
Posted
Nice one
If you are cerious there is also a CSS property that we can use to check wether the input is in valid or invalid state and here is how it works
/* Style for invalid input fields */
input:invalid {
border: 2px solid red; /* Red border for invalid input */
background-color: #ffe6e6; /* Light red background */
color: #a94442; /* Darker red text */
}
input:invalid:focus {
outline: none;
box-shadow: 0 0 5px red; /* Red shadow when focused */
}
textarea:invalid, select:invalid {
border: 2px solid red;
background-color: #ffe6e6;
color: #a94442;
}
Explanation:
-
input:invalid: This targets any <input> element that is invalid according to its validation rules (e.g., type="email" without a valid email format).
-
background-color and border: Provide visual feedback with a red border and a light red background.
-
input:invalid:focus: Adds a red shadow when the invalid input is focused, making it stand out.
Marked as helpful
1
