Developer Toolkit

Form Validator Generator

Turn your form fields into ready-to-use JS validation code with required checks, email format and minimum password length.

Fields

Form element id

Live preview

email *

password *

No errors reported.

Generated JS

// Validation for #my-form
(function () {
  var form = document.getElementById("my-form");
  if (!form) return;

  function validate(data) {
    var errors = {};

    if (!String(data.email ?? "").trim()) errors.email = "email is required.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(data.email)) errors.email = "Enter a valid email address.";

    if (!String(data.password ?? "").trim()) errors.password = "password is required.";
    else if (data.password.length < 8) errors.password = "password must be at least 8 characters.";

    return errors;
  }

  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var formData = new FormData(form);
    var data = {
      email: String(formData.get("email") || ""),
      password: String(formData.get("password") || "")
    };

    var errors = validate(data);

    form.querySelectorAll("[data-error-for]").forEach(function (el) {
      el.textContent = errors[el.getAttribute("data-error-for")] || "";
    });

    if (Object.keys(errors).length > 0) {
      console.warn("Validation failed", errors);
      return;
    }

    // Valid — replace with your own submit logic
    console.log("Valid form data", data);
  });
})();