Usage

This guide shows the quickest way to get started.

If you haven’t installed the library yet, visit the Installation guide first.

Step 1 — Create your form


<form id="contactForm">
  <input
    type="text"
    name="name"
    required
    placeholder="Your name"
  />
 
  <input
    type="email"
    name="email"
    required
    placeholder="Email address"
  />
 
  <textarea
    name="message"
    required
    placeholder="Your message"
  ></textarea>
 
  <button type="submit">
    Send
  </button>
</form>

Step 2 — Create a validator


import "@nfsfu234/form-validation/css";
import { NFSFU234FormValidation } from "@nfsfu234/form-validation";
 
const validator = new NFSFU234FormValidation("contactForm");

The constructor accepts:

a form ID
a form element
null (utility-only instance)
no argument (automatic form detection)
a configuration object

Step 3 — Validate the form


const valid = await validator.validate();
 
if (!valid) {
  return;
}
 
console.log("Form is valid.");

Since v3, validate() is asynchronous.

Step 4 — Submit


const submitted = await validator.submit();
 
if (submitted) {
  console.log("Submitted successfully.");
}

Configuration Example


const validator = new NFSFU234FormValidation({
  form: "contactForm",
 
  customErrorMessages: {
    email: {
      empty: "Email is required.",
      format: "Enter a valid email."
    }
  }
});

Site-wide configuration

Large applications can register every form once.


NFSFU234FormValidation.configureForms([
  {
    form: "loginForm"
  },
  {
    form: "registerForm"
  }
]);
 
NFSFU234FormValidation.autoInit();

Every page automatically initializes the forms that exist.

AJAX

The library includes a built-in AJAX helper.


const response = await validator.ajax({
  url: "/api/contact",
  RequestMethod: "POST",
  RequestHeader: {
    "Content-Type": "application/json"
  }
});
 
console.log(response);

You can also use the static helper.


await NFSFU234FormValidation.ajax({
  url: "/api/contact",
  RequestMethod: "POST"
});

File validation

Version 3 introduces built-in validation for file inputs.


await validator.validateFile("resume", {
  required: true,
  maxSizeMB: 5,
  accept: [
    ".pdf",
    ".docx"
  ]
});

You can also validate every file input automatically.


await validator.validateAllFile();

Learn more

Continue exploring the documentation: