Configure your validation,
don't code it.

<form action="/signup" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" data-validation="length" data-validation-length="min2">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" data-validation="email">

  <label for="site">Website</label>
  <input id="site" name="site" data-validation="url" data-validation-optional="true">

  <button type="submit">Create account</button>
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/premento/[email protected]/dist/jquery.form-validator.js"></script>
<script>
  $.validate();
</script>

Why this plugin

Built for real forms

Validation fires when a field loses focus, and once a field is showing an error it re-checks as the value changes — so a mistake is confirmed fixed the moment it is fixed, rather than on the next blur. That is the reward early, punish late pattern, and it is the default.

It listens to the input event, which means a value arriving by paste, autofill, drag-and-drop, speech input or IME composition is caught. Key events miss all of those.

$.validate({
  modules: 'security, date, file',

  // Errors collected into one summary above the form instead of beside each field.
  errorMessagePosition: 'top',

  // Bootstrap 4/5 class names instead of the Bootstrap 3 era defaults.
  bootstrap: 5,

  onSuccess: function ($form) {
    // Return false to submit over XHR instead.
    return true;
  }
});

What is in 4.4.0

Version 3.0 was a substantial modernisation, and 4.x continues it. The headline changes:

• Accessibility. Every error is now associated with its field for assistive technology, the summary is a navigable role="alert", and focus moves to the problem. Read more →
• Constraint Validation API. The native module keeps the browser's view of a field and the plugin's view in agreement. Read more →
• Passwords rescored. strength follows NIST SP 800-63B rev 4 — length-driven, not composition-driven — with optional breach screening. Read more →
• Bootstrap 4 and 5 presets. bootstrap: 5 emits is-invalid and .invalid-feedback instead of the 3.x class names. Read more →
• ESM and TypeScript. An exports map, real .d.ts declarations, and no runtime script injection. Read more →

Upgrading from 2.x? The upgrade guide lists every breaking change.

Where to next