Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Fri, 19 Jan 2024 17:33:03 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 Progressively Enhanced Form Validation https://frontendmasters.com/blog/progressively-enhanced-form-validation/ https://frontendmasters.com/blog/progressively-enhanced-form-validation/#respond Fri, 19 Jan 2024 17:33:03 +0000 https://frontendmasters.com/blog/?p=588 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.

]]> https://frontendmasters.com/blog/progressively-enhanced-form-validation/feed/ 0 588