In this post, I will show you how to validation the required form fields with CSS.
If you want to see full version of this project or all HTML-CSS projects look this Repository
Create HTML
<form>
<!--==== Add required attribute to input tag ====-->
<input type="password" required />
<button type="submit"> Login </button>
</form>
CSS
form:invalid button {
pointer-events: none;
}
form:valid button {
pointer-events: initial;
}
My output with some styles
Top comments (3)
Not exactly the same use case.
You can't do a basic "repeat password" validation with just HTML5 attributes.
But yeah, definitely agree that in many cases, people are too eager to reach for a JS library when things can be done natively in HTML and styled in CSS.
pointer-eventswork nicely when there's a pointer/mouse... But keyboard users will love to have a word about this solution 😋Yup, discovered that few years ago. It's amazing feature. Great share!
And btw, it has amazing support: caniuse.com/form-validation