#form validation

A jQuery plugin for the Material Components Web that applies form validation, floating label and input mask functionalities to form fields.

Demo

Download

Just another jQuery based credit card number validator designed for your eCommerce website or online store.

Demo

Download

Checkify is a jQuery based form validator that provides realtime, client-side, mobile-friendly validation functionalities on form fields.

Demo

Download

DjValidator is a simple, flexible, powerful jQuery based HTML5 form validator that comes with 20+ built-in validation rules and is easy to extend using your own validations.

Demo

Download

This is a super simple and lightweight jQuery plugin to provide client-side form validation without writing any JavaScript codes.

Demo

Download

validator.js is a small jQuery form validation plugin for Bootstrap framework that currently comes with 6 validators: 'required', 'length', 'or', 'equals', 'callback' and custom REGEX patterns.

Demo

Download

We rebuilt a client's signup form three times last year before it stopped losing users. Each rebuild was less work than it sounded going in, but the original team would have told you upfront that the form was fine and the conversion problem was somewhere else. The conversion problem was the form, and figuring that out took three rounds.

This is the writeup of what we found, in case it saves another team a couple of those rounds. The lessons map directly to choices in inline validation design, and the specific places we got it wrong on rounds one and two are the same places we see other teams getting it wrong now.

Photo by BM Amaro on Pexels

What the form looked like at the start

The client had a SaaS signup form with eight fields: name, email, password, password confirmation, company name, role, phone, and country. The form had a 31% completion rate from people who started typing in any field. The original team had spent weeks A/B testing button copy, field order, and headline language. The completion rate had not meaningfully moved.

They asked us to look at it with fresh eyes. The first thing we noticed was not the field order; it was the validation behavior.

Round one: fix the validation timing

The form validated on every keystroke. The user started typing an email, three letters in the field turned red, the user deleted the red message and kept typing, the field stayed red for a beat after the email was complete, then went green when the regex passed.

The pattern looks fine in isolation. In aggregate it was producing a "you are doing this wrong" feeling on every field. We changed two things on round one:

Validation only ran on blur, not on keystroke.

Once a field was in an error state, the error cleared the moment the input became valid (live re-check after error).

That is the pattern: do not interrupt active typing, but do reward fixes immediately. Completion rate went from 31% to 38% over two weeks. We were happy.

Round two: fix what the error messages actually say

After the round-one improvement plateaued, we recorded a small set of user sessions and watched users finish the form. We saw the same pattern repeatedly: users hit an error, read the message, and looked confused for a beat before figuring out what to do.

The error messages were technically correct and practically useless. "Password must be at least 12 characters" was the rule, not the action. Users had to translate it into "I need to add more characters" themselves. Almost half a second of cognitive overhead per error, for the users who got there at all.

We rewrote every error message into action framing:

"Password must be at least 12 characters" became "Use at least 12 characters. You have 7."

"Invalid email" became "Add the @ to make this a valid email address."

"Phone is required" became "Add your phone number to continue."

The count in the password message turned out to matter a lot. Users could see how close they were rather than guessing. Completion rate moved from 38% to 44%.

Round three: fix the async username check

Then we hit a wall. The completion rate stopped moving. We recorded more sessions and saw a different failure mode this time, concentrated on a specific field.

The username field had an async availability check that we had not touched on rounds one or two. Users would type a username, tab to the next field, and a beat later the username field would flash red with "Username taken." The user was already in the next field, did not notice the flash, and submitted thinking everything was correct. On submit, the form returned a different error message at the top of the form, saying "There are errors below." The user scrolled, found the username error, re-tried, and often gave up.

The async pattern was the bug. We changed three things on round three:

Added a debounce so the check only fired 400 ms after the user stopped typing.

Added a visible spinner inside the field while the check was in flight.

Disabled the submit button while any async check was pending.

The submit-disabled change was the unexpectedly large one. A meaningful chunk of users were getting past the async check by submitting before it completed, then bouncing back into the form when the server rejected them. With submit disabled until the check resolved, those users either waited a beat or fixed the field before submitting. Either way, fewer of them bailed.

Completion rate after round three went from 44% to 51%. That is where it lives now, twelve months later.

Photo by ThisisEngineering on Unsplash

What the three rounds taught us

The thing we did not internalize before round one is that the inline validation experience is the form. The fields, the labels, the field order: all of those matter at the margin. The validation experience is the spine. A form with good fields and bad validation feels like the form is fighting you. A form with average fields and good validation feels like the form is helping you.

The specific patterns that earned their keep across the three rounds:

Do not validate while users are typing. Wait until blur. Re-evaluate live only after an error.

Action-framed error messages. Tell the user what to do, not the rule that excludes them.

Counts where they help. "You have 7" tells users how close they are.

Async patterns need their own design. Debounce, pending state, submit disabled, distinguish network from validation errors.

Test with recorded sessions. Analytics tells you something is broken; user recordings tell you what.

The pattern across all three rounds: the team at 137Foundry iterated on small choices that individually seemed minor and collectively were the difference between a 31% and a 51% completion rate. The framework, the field order, the headline: none of those moved without the validation work first.

The accessibility piece we did at the end

We added the accessibility wiring (proper aria-describedby, aria-invalid, live regions on errors) on the second round but did not see it move conversion. It would not have shown up in the conversion analytics because the analytics setup did not break out users on assistive technology.

We did it anyway because it was the right baseline, and we tested it with WAVE and a screen reader to verify. The W3C Web Content Accessibility Guidelines cover the formal requirements; the WAI-ARIA Authoring Practices Guide has the worked code examples we used as reference.

The accessibility work is not a conversion lever for the sighted users we were measuring. It is a baseline obligation for the form to work for everyone. Treating those as the same project would have been a mistake; they are separate workstreams with separate evaluation criteria.

The deeper read on the full validation design

The patterns above are the lessons compressed into one writeup. The full design of inline validation, including the specific cases we have not had to debug on this form but have seen on others (paste handling, autofill normalization, password strength patterns, when to show success states), sits in a longer guide on designing inline form validation that actually helps users on 137Foundry's services hub.

validation-enhancer is a JavaScript web component that upgrades native HTML5 form validation with the inline error messages, CSS state classes, and accessibility behavior that the browser’s built-in validation never provides on its own. Wrap any <form> in the <validation-enhancer> custom element and you get per-field error text, .valid and .invalid class toggling, aria-invalid management, and a…