Contact Form with Custom Error Messages

A contact form should guide users toward fixing mistakes instead of showing confusing validation errors. In this example, every validation failure displays your own custom message in a modal—without writing any validation logic or manually calling displayError().

Once configured, the library automatically validates the form whenever it's submitted.

---

HTML

<form id="contactForm">
    <input
        type="email"
        name="email"
        placeholder="Email address"
    />

    <textarea
        name="message"
        placeholder="How can we help?"
    ></textarea>

    <button type="submit">
        Send Message
    </button>
</form>

---

JavaScript

import NFSFU234FormValidation from "@nfsfu234/form-validation";

NFSFU234FormValidation.configureForms([
    {
        form: "#contactForm",

        errorType: "modal",

        fields: {
            email: {
                required: true,
                type: "email"
            },

            message: {
                required: true,
                minLength: 20,
                maxLength: 500
            }
        },

        customErrorMessages: {
            email:
                "We need a valid email address so we can reply to you.",

            message:
                "Please tell us a little more about your issue (minimum 20 characters)."
        }
    }
]);

NFSFU234FormValidation.autoInit();

---

What happens?

When the user submits the form, the library automatically:

• Finds the registered form.
• Adds the novalidate attribute.
• Validates every configured field.
• Displays your custom validation messages.
• Prevents submission while validation fails.
• Allows submission once every field passes validation.

No event listeners or manual validation code are required.

---

Using with Next.js

Initialize the configuration inside a Client Component.

"use client";

import { useEffect } from "react";
import NFSFU234FormValidation from "@nfsfu234/form-validation";

export default function ContactFormInit() {
    useEffect(() => {
        NFSFU234FormValidation.configureForms([
            {
                form: "#contactForm",

                errorType: "modal",

                fields: {
                    email: {
                        required: true,
                        type: "email"
                    },

                    message: {
                        required: true,
                        minLength: 20,
                        maxLength: 500
                    }
                },

                customErrorMessages: {
                    email:
                        "We need a valid email address so we can reply to you.",

                    message:
                        "Please tell us a little more about your issue (minimum 20 characters)."
                }
            }
        ]);

        NFSFU234FormValidation.autoInit();
    }, []);

    return null;
}

Mount this component once in your application. autoInit() only initializes forms that actually exist on the current page.

---

Configuration

Display validation as a modal

errorType: "modal"

To display validation messages directly beneath each field instead, use:

errorType: "inline"

or simply omit the option to use the library's default behavior.

---

Customize validation messages

Messages are matched by the field name.

customErrorMessages: {
    email: "Enter a valid email address.",
    message: "Your message must contain at least 20 characters."
}

Fields without custom messages automatically use the library's default validation messages.

---

Why use configureForms()?

For larger applications, defining validation rules in one place is often easier than attaching validation to every form individually.

configureForms() lets you:

• Register multiple forms.
• Keep validation rules together.
• Customize messages once.
• Automatically initialize forms with autoInit().

---

Continue learning

• ⚙️ Form Configuration — Learn everything configureForms() supports.
• 🤖 autoInit() — Automatically initialize forms across your application.
• 🎨 Custom Error Messages — Personalize validation feedback.
• 📡 AJAX Requests — Submit forms without reloading the page.
• 📚 Available Functions — Explore the complete API reference.