🏁 Initialization

To use NFSFU234FormValidation, create an instance of the library using one of the initialization methods below. The constructor is flexible and supports automatic form detection, utility-only instances, specific form elements, form IDs, and full configuration objects.

1. Automatic Form Detection

This is the simplest way to get started. The library automatically looks for a form with the ID jsForm. If none exists, it falls back to the first <form> element on the page.

const validator = new NFSFU234FormValidation();

This is ideal for pages that contain a single form and require little or no configuration.

2. Utility-Only (Form-less) Instance

If you only need the library’s utility methods—such as password generation, password strength checking, AJAX requests, or validation helpers—you can create an instance without attaching it to any form by passing null.

const validator = new NFSFU234FormValidation(null);
 
// Utility examples
const strength = validator.passwordStrength("hunter2");
 
const password = await validator.generatePassword(16);
 
const response = await validator.ajax({
    url: "https://api.example.com/login",
    RequestMethod: "POST"
});

When initialized this way, the library:

• does not search for a form
• does not add the novalidate attribute
• does not register a submit listener

This is especially useful in frameworks such as React, Vue, Angular, or during server-side rendering.

If you only need the AJAX helper, you don’t even need to create an instance:

await NFSFU234FormValidation.ajax({
    url: "https://api.example.com/login",
    RequestMethod: "POST"
});

3. Using a Form ID

You can initialize the library by passing the ID of an existing form.

const validator = new NFSFU234FormValidation("contactForm");

This is equivalent to passing:

document.getElementById("contactForm");

4. Using a Form Element

If you already have a reference to the form element, pass it directly.

const form = document.getElementById("contactForm");
 
const validator = new NFSFU234FormValidation(form);

This is the recommended approach when working with JavaScript frameworks or dynamically created forms.

5. Using a Configuration Object (Recommended)

For larger applications, the recommended approach is to initialize the validator using a configuration object. This keeps your form reference, custom validation messages, and AJAX configuration together.

const validator = new NFSFU234FormValidation({
    form: "contactForm",
 
    customErrorMessages: {
        email: "Please enter a valid email address.",
        password: "Password must be at least 8 characters long."
    },
 
    ajaxOptions: {
        url: "/api/contact",
        RequestMethod: "POST",
        RequestHeader: {
            "Content-Type": "application/json"
        }
    }
});

You may also pass the form element directly instead of its ID:

const form = document.getElementById("contactForm");
 
const validator = new NFSFU234FormValidation({
    form,
 
    customErrorMessages: {
        email: "Please enter a valid email address."
    },
 
    ajaxOptions: {
        url: "/api/contact",
        RequestMethod: "POST"
    }
});

This initialization style is recommended because it groups all form-related configuration into a single object, making your code easier to read, maintain, and extend.

Backwards Compatibility

The previous two-parameter constructor is still supported for backwards compatibility.

const validator = new NFSFU234FormValidation(
    {
        form: "contactForm",
        customErrorMessages: {
            email: "Invalid email address."
        }
    },
    {
        url: "/api/contact",
        RequestMethod: "POST"
    }
);

However, new projects should prefer the single configuration object approach, as it is cleaner, easier to maintain, and represents the recommended API going forward.