Archive for the ‘Forms’ Category

Why Use a Third-Party Form Validation Library?

We've just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their ...

Form Validation Part 3: A Validity State API Polyfill

Posted on: No Comments
In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, th...

Form Validation Part 1: Constraint Validation in HTML

Posted on: No Comments
Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp's embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validati...

Designing The Perfect Accordion

Posted on: No Comments
    Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off...

Floating Labels are Problematic

I feel like all these issues are handleable, but the damning issue is #3: they need space to move into. Labels can't go away and need to be readable at all times, so a floating label pattern doesn't actually save any space. You could have just put the ...

React Forms: Using Refs

Posted on: No Comments
React provides two standard ways to grab values from <form> elements. The first method is to implement what are called controlled components (see my blog post on the topic) and the second is to use React's ref property. Controlled components are ...

Better Form Design: One Thing Per Page

    In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-...