DEV Community

Enes Kılıç
Enes Kılıç

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

CSS

form:invalid button {
  pointer-events: none;
}

form:valid button {
  pointer-events: initial;
}
Enter fullscreen mode Exit fullscreen mode

My output with some styles

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU

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!

Collapse
iainsimmons profile image
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.

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

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:

Collapse
alvaromontoro profile image
Alvaro Montoro

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

Collapse
eboye profile image
eboye

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

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