Examples

Every form on this page is running the actual plugin. Type into them, submit them, and watch what happens — nothing here is a screenshot.

Nothing is submitted

Each demo returns false from onSuccess, so a passing form reports success instead of navigating away.

Basic validation

Three rules, inline messages, and no configuration beyond naming the form.

Sign-up formLive

Submit it empty, then fix one field at a time — each error clears the moment it is corrected.

HTML

<form id="signup">
  <label for="name">Name</label>
  <input id="name" name="name" data-validation="required">

  <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>

JavaScript

$.validate({ form: '#signup' });

Error summary

The same rules with errorMessagePosition: 'top'. Errors collect into one role="alert" block and focus moves into it, with every entry linking to its field.

Summary above the formLive

Submit empty, then use Tab and Enter on the summary links — each one takes you to the field it names.

JavaScript

$.validate({
  form: '#signup',
  errorMessagePosition: 'top'
});

Passwords

strength scores by length rather than by character composition, and confirmation checks the two fields match.

Password strength and confirmationLive

Try P@ss1! — rejected. Then correcthorsebatterystaple — accepted. Length is what counts.

HTML

<input name="pw" type="password"
       data-validation="strength" data-validation-strength="2">

<input name="pw_confirm" type="password"
       data-validation="confirmation" data-validation-confirm="pw">

To also screen against known breaches, add the breached rule:

HTML

<input name="pw" type="password" data-validation="strength breached">

Not enabled in this demo

breached makes an outbound request to the Have I Been Pwned range API on every check, so it is shown here as code rather than wired up on a documentation page. Only the first five characters of the password's SHA-1 are ever sent — see the reference.

Conditional rules

With the logic module, whether a rule runs can depend on another field.

A field required only when another is answeredLive

Pick “Somewhere else” and submit — VAT is skipped. Pick “Sweden” and it becomes required.

HTML

<input name="vat" data-validation="required"
       data-validation-depends-on="country"
       data-validation-depends-on-value="SE">

Sanitizing input

The sanitize module cleans the value before it is validated, and writes the cleaned value back so what you see is what gets submitted.

Trim, lower-case and capitalizeLive

Type ADA into either field and move focus away.

HTML

<input data-sanitize="trim lower" data-validation="length"
       data-validation-length="min3">

Numbers and dates

Ranges, decimals and date formatsLive

Try 29/02/2024 — a real leap day, accepted. Then 29/02/2023 — rejected.

Checkbox groups

At least one, at most threeLive

Only the first checkbox carries the attributes; the rule covers the whole group by name.

HTML

<input type="checkbox" name="topics[]" data-validation="checkbox_group"
       data-validation-qty="1-3">
<input type="checkbox" name="topics[]">
<input type="checkbox" name="topics[]">

Fields added later

With observeDynamicFields the plugin watches the form and wires up fields that appear after setup, instead of needing $.validate() called again.

Repeatable rowsLive

Add a row, put something invalid in it, and submit — the new field is validated too.

JavaScript

$.validate({
  form: '#invites',
  observeDynamicFields: true
});

A custom validator

Anything you can express as a function can be a rule. This one checks for an even number.

data-validation="even"Live

Registered on this page with $.formUtils.addValidator().

JavaScript

$.formUtils.addValidator({
  name: 'even',
  validatorFunction: function (value) {
    return parseInt(value, 10) % 2 === 0;
  },
  errorMessage: 'Please give an even number',
  errorMessageKey: 'badEvenNumber'
});

Help text and suggestions

Focus a field to see its help textLive

Type b to see the suggestion list. No jQuery UI involved.

HTML

<input name="colour"
       data-suggestions="White, Green, Blue, Black, Brown"
       data-validation-help="Start typing and suggestions will appear"
       data-validation="required">

Putting it together

JavaScript

$.validate({
  form: '#checkout',
  modules: 'security, date, logic, sanitize',
  errorMessagePosition: 'top',
  bootstrap: 5,

  onSuccess: function ($form) {
    $.post('/checkout', $form.serialize());
    return false;
  },

  onError: function ($form) {
    analytics.track('checkout_validation_failed');
  }
});