jQuery Form Validation — Working Code for 2026

<form id="signup" action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label>Name<input name="name" required minlength="2" /></label>
  <label>Email<input name="email" type="email" required /></label>
  <label>Password<input name="password" type="password" required minlength="8" /></label>
  <label>Confirm password<input name="password_confirm" type="password" required /></label>

  <button type="submit">Sign up</button>
</form>

<!-- jQuery + jquery-validate CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<script>
$("#signup").validate({
  rules: {
    name: { required: true, minlength: 2 },
    email: { required: true, email: true },
    password: { required: true, minlength: 8 },
    password_confirm: { required: true, equalTo: "[name=password]" },
  },
  messages: {
    name: { required: "Please enter your name." },
    email: { required: "We need your email.", email: "That's not a valid email." },
    password: { minlength: "Password must be at least 8 characters." },
    password_confirm: { equalTo: "Passwords don't match." },
  },
  submitHandler: function (form) {
    // Custom submission via AJAX (optional — if omitted, form submits normally)
    form.submit();
  },
});
</script>

jQuery's `jquery-validate` plugin is the legacy-but-still-popular way to add rich client-side validation to a form. It's older than HTML5 native validation and predates React, but it still solves the validation-UI problem cleanly: declarative rules, custom messages, optional async submission. If your codebase already uses jQuery, validate is the path of least resistance.

The rules object maps field names to validation rules. Built-in rules: `required`, `email`, `url`, `number`, `digits`, `minlength`, `maxlength`, `min`, `max`, `equalTo`, `creditcard`. Each rule can be a boolean (apply the rule) or a value (apply with that parameter). The messages object pairs rule failures with user-facing strings.

The `submitHandler` is the function called when validation passes. By default it submits the form natively (full page reload). Override it to submit via AJAX — call `$.ajax({...})` with the form's serialized data, handle the response in your own UI, and skip the page reload. This is how you wire jquery-validate to a JSON API like splitforms.

Modern alternatives: HTML5 native validation (no library, less power), React Hook Form + Zod (typed, framework-coupled), Bootstrap 5 validation (native attributes + Bootstrap classes). For new projects, prefer one of these. For existing jQuery codebases, validate stays the right choice.

$("#signup").validate({
  // ... rules as above ...
  submitHandler: function (form) {
    const formData = new FormData(form);
    $.ajax({
      url: form.action,
      method: "POST",
      data: formData,
      processData: false,
      contentType: false,
    }).done(function (res) {
      if (res.success) {
        $("#status").text("Thanks!");
        form.reset();
      } else {
        $("#status").text(res.message || "Error.");
      }
    }).fail(function () {
      $("#status").text("Network error.");
    });
  },
});

Declarative rules, custom messages, AJAX submit handler — all in 20 lines.