Validation

HTML attributes like required and type="email" are enforced only in the browser, so a client that posts directly to your endpoint can skip them. ShipMyForm's rules run on the server for every submission, independent of the client. A submission that fails validation is rejected before it is stored, counted against your quota, or delivered to a connector.

Add rules in your dashboard

Open your form's Settings and find Validation rules. Add a rule per field you want to check. The field name must match your input's name attribute.

Show errors inline with fetch()

Send Accept: application/json so ShipMyForm replies with JSON instead of redirecting. When a submission is invalid you get 422 with a fields map — field name to message — that you can render beside each input.

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

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

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

  // Validation failed: show a message next to each field.
  if (res.status === 422 && data.error === "validation") {
    for (const [name, message] of Object.entries(data.fields)) {
      showFieldError(form, name, message);
    }
    return;
  }

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

The 422 response

error is always "validation"; fields contains only the fields that failed.

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

Related

• React & Next.js — the fetch() pattern in a component.
• Stop form spam without reCAPTCHA — the spam layer that runs alongside validation.