How to Add Validation to Your Form

Every public form eventually receives junk: an empty message, an email that is just jane@, a phone number that is three digits. You can catch some of it in the browser with required and type="email", but those checks only run in the browser — anything that posts straight to your endpoint (a script, a bot, a request with JavaScript off) sails right past them.

Real validation has to happen on the server. With ShipMyForm you don't write or host one: you add rules to your form in the dashboard, and every submission is checked before it is stored, counted, or forwarded. This guide walks through it end to end, including how to show a message next to each field.

Step 1: add rules in your dashboard

Open your form, go to Settings, and find the Validation rules section. Add a rule for each field you want to check — the field name must match your input's name attribute. For each rule you can set a type (email, URL, number, or phone), mark it required, and set length limits. The Advanced link adds a regex pattern, numeric min/max, and a custom error message.

Here we require a valid email, a message of at least 10 characters, and a reference that matches a regex with a friendly custom message. Save, and the rules take effect immediately.

What you can check

Step 2 (optional): show errors next to each field

Rules alone already protect your inbox — an invalid submission is rejected server-side no matter what. But if you submit with JavaScript, you can turn those rejections into inline messages. Send the header Accept: application/json and, on a 422 response, read the fields object and render each message beside the matching input.

const form = document.querySelector("#contact");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  clearErrors(form);

  const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  const data = await res.json();

  if (res.status === 422 && data.error === "validation") {
    for (const [name, message] of Object.entries(data.fields)) {
      showFieldError(form, name, message); // your render helper
    }
    return;
  }

  if (data.ok) {
    form.reset();
    showSuccess();
  }
});

The result is exactly what your visitors expect — a clear message under the field that needs fixing, with no page reload and no backend of your own:

The 422 response

error is always "validation", and fields contains only the fields that failed — each mapped to its message (your custom text when you set one).

{
  "ok": false,
  "error": "validation",
  "message": "Some fields need attention.",
  "fields": {
    "email": "Enter a valid email address.",
    "message": "Must be at least 10 characters."
  }
}

Where validation sits in the pipeline

Validation runs early, right after spam filtering and before anything durable happens. So a submission that fails your rules is never stored in your inbox, never counted against your monthly quota, and never delivered to a connector. Your data stays clean and your quota only reflects real submissions.

Next steps

• New here? Start with what a form backend actually is.
• Wiring it in React or Next.js? See Next.js form handling.
• Read the validation reference in the docs for the full rule and response details.
• Start free — validation is on every plan, with 100 submissions a month and no card required.