Progressively Enhanced Form Validation

Here’s a thing you’re sure to do in your web developer career: add form validation to a form. You can’t leave that name field blank! That doesn’t look like an email address! That quantity is too high! Forms are a part of the beating heart of the web, and especially important to business. You can’t charge a credit card with an invalid card number, and you can’t let someone order 5 rice cookers if you only have 4 in stock.

These days, the approach to form validation should be:

  1. Start with semantic, valid, accessible HTML. You can do some level of validation on forms right in HTML.
  2. Layer on CSS, adjusting the styles for form elements in different states of validity.
  3. Layer on JavaScript, filling in gaps that HTML can’t do and making things more accessible.

It’s a lot! But it’s worth doing right. Fortunately, Gerardo Rodriguez’s 4-part series and demo/repo is a very good reference. You might want to test those forms, too.

It's time to take your JavaScript to the next level

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.