Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
form validation

12 Articles
{
,

}
Direct link to the article Detecting Specific Text Input with HTML and CSS
:not :placeholder-shown :valid form validation forms

Detecting Specific Text Input with HTML and CSS

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:

  1. You have to press a special combination of keys on a keyboard.
  2. Then type a secret password.

From there, a special message pops …

Chris Coyier on Nov 9, 2021
Direct link to the article Lightweight Form Validation with Alpine.js and Iodine.js
alpine.js form validation iodine

Lightweight Form Validation with Alpine.js and Iodine.js

Many users these days expect instant feedback in form validation. How do you achieve this level of interactivity when you’re building a small static site or a server-rendered Rails or Laravel app? Alpine.js and Iodine.js are two minimal JavaScript …

Hugh Haworth on Oct 24, 2021
Direct link to the article Happier HTML5 form validation in Vue
form validation vue

Happier HTML5 form validation in Vue

It’s kind of neat that we can do input:invalid {} in CSS to style an input when it’s in an invalid state. Yet, used exactly like that, the UX is pretty bad. Say you have <input type="text" required>. That’s …

Chris Coyier on Dec 3, 2020
Direct link to the article Form Validation in Under an Hour with Vuelidate
form validation forms passwords vue forms vuelidate

Form Validation in Under an Hour with Vuelidate

Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate is personally my favorite …

Sarah Drasner on Apr 2, 2019
Direct link to the article HTML for Numeric Zip Codes
form validation forms zip

HTML for Numeric Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave.

Me (coding a form): <input id="zip" type="number">
Tiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!
Me: Wait, why are you here? Is this going

…
Chris Coyier on Oct 16, 2018
Direct link to the article Happier HTML5 Form Validation
form validation

Happier HTML5 Form Validation

HTML has given us loads of form validation stuff in the last few years. Dave Rupert puts a point on the UX problems with it:

If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience

…
Chris Coyier on Nov 20, 2017
Direct link to the article Why Use a Third-Party Form Validation Library?
form validation forms ux

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 …

Chris Coyier on Jul 3, 2017
Direct link to the article Form Validation – Part 4: Validating the MailChimp Subscribe Form
form validation forms ux

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms.

We’ve learned how to use the Constraint Validation API to enhance the native browser validation …

Chris Ferdinandi on Jul 23, 2021
Direct link to the article Form Validation Part 3: A Validity State API Polyfill
form validation forms ux

Form Validation Part 3: A Validity State API Polyfill

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 …

Chris Ferdinandi on Mar 31, 2020
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top