Form Validation with CSS

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

Comments

[Luke Shiru]

I'll save the link to this post so every time someone tells me they need something like Formik for validation+user feedback, then I'll just show them this. Approaches like this will become even more crucial as frameworks like Remix grow in popularity.

Cheers!

[Iain Simmons]

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.

[Luke Shiru]

You need a line of JS for that, you're right. Basically "oninput" of the "password" you update the pattern of the "repeat password" input and you make both required. But yup, in that case you need a little bit of JS. I had to do it a while ago for another post as a showcase, here it is:

[Alvaro Montoro]

pointer-events work nicely when there's a pointer/mouse... But keyboard users will love to have a word about this solution 😋

[eboye]

Yup, discovered that few years ago. It's amazing feature. Great share!

And btw, it has amazing support: caniuse.com/form-validation