Quick Start

New to @nfsfu234/form-validation? This page gets you from installation to a working form in just a few minutes.

If you’re looking for more advanced setup, see the dedicated guides for:

1. Install

Choose your preferred package manager.


npm install @nfsfu234/form-validation


pnpm add @nfsfu234/form-validation


yarn add @nfsfu234/form-validation


bun add @nfsfu234/form-validation

You can also use the browser build from jsDelivr.


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nfsfu234/form-validation/dist/css/nfsfu234FormValidation.min.css"
/>
 
<script src="https://cdn.jsdelivr.net/npm/@nfsfu234/form-validation/dist/js/nfsfu234FormValidation.js"></script>

2. Create your form


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

3. Initialize the validator

The simplest setup requires only one line.


const validator = new NFSFU234FormValidation("contactForm");

If you omit the form ID, the library automatically discovers the first form on the page.


const validator = new NFSFU234FormValidation();

4. Submit with validation


const validator = new NFSFU234FormValidation("contactForm");
 
document
  .querySelector("#contactForm")
  .addEventListener("submit", async (event) => {
    event.preventDefault();
 
    const result = await validator.submit();
 
    if (result.type === "success") {
      console.log("Form submitted successfully.");
    } else {
      console.log(result);
    }
  });

5. Validate without submitting

Sometimes you only want to validate the form.


const validator = new NFSFU234FormValidation("contactForm");
 
const result = await validator.validate();
 
if (result.type === "success") {
  console.log("Everything looks good.");
}

6. Make AJAX requests

You can send requests without creating an instance.


const response = await NFSFU234FormValidation.ajax({
  url: "/api/contact",
  RequestMethod: "POST",
  body: {
    name: "John Doe",
    email: "[email protected]",
  },
});
 
console.log(response);

7. Utility-only mode

Need password generation, email validation, AJAX utilities, or other helper methods without a form?

Create a utility-only instance.


const validator = new NFSFU234FormValidation(null);
 
validator.isEmail("[email protected]");
 
validator.generatePassword();

For multi-page websites

Version 3.0.0 introduces one of the library’s biggest additions: centralized form configuration.

Instead of initializing every form manually on every page, register all your forms once and let the library automatically initialize whichever forms exist on the current page.

Configure every form


import { NFSFU234FormValidation } from "@nfsfu234/form-validation";
 
NFSFU234FormValidation.configureForms([
  {
    form: "contactForm",
    customErrorMessages: {
      email: {
        empty: "Email is required.",
      },
    },
  },
 
  {
    form: "newsletterForm",
  },
 
  {
    form: "checkoutForm",
    isErrorMessageInline: true,
  },
]);

Automatically initialize them


document.addEventListener("DOMContentLoaded", () => {
  NFSFU234FormValidation.autoInit();
});

The library checks the current page and only initializes forms that actually exist.

This means the same configuration file can be shared across an entire website without additional setup.

Why use this approach?

Using configureForms() together with autoInit() makes large projects much easier to maintain.

Benefits include:

One central configuration for every form.
No repeated initialization code.
Works across multi-page websites.
Only existing forms are initialized.
Easier maintenance as your project grows.

What’s next?

Now that your project is running, continue with the rest of the documentation:

Installation — every installation method.
Initialization — constructor options and configuration.
Usage — common workflows and examples.
Available Functions — complete API reference.
Frameworks — React, Next.js, Vite, and more.
Migration — upgrading from previous versions.