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

[Alvaro Montoro]

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

[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.

[eboye]

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

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