Search
View Details

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

Frontend Masters logo

Frontend Masters is the best place on the web to really learn JavaScript. We have a complete learning path from the biggest and best teachers in JavaScript to help you make the most out of the web's biggest language.

Leave a Reply

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

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.