🚀 Usage

The NFSFU234FormValidation Library is a versatile toolbox that empowers you to validate forms, submit them, and handle AJAX requests effortlessly. This guide will walk you through setting up and using the NFSFU234FormValidation library. For detailed installation and initialization instructions, please refer to the Installation and Initialization sections.

Step 1: Import the Library

To start using the NFSFU234FormValidation library, add the following CDN link in the <head> section of your HTML document.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/some-css-framework/1.0.0/css-framework.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/NFSFU234FormValidation/1.0.0/NFSFU234FormValidation.min.js" defer></script>
</head>
<body>

Step 2: Create Your HTML Form

Create an HTML form that you want to validate. Include the form ID so the library can detect it.


<body>
    
        <h2>Contact Us</h2>
        <form id="contactForm">
            
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            
            
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            
            
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
            
            <button type="submit">Submit</button>
        </form>
    
    <script src="script.js"></script>
</body>
</html>

Step 3: Initialize the Library

Create a JavaScript file (e.g., script.js) and initialize the NFSFU234FormValidation library for your form.


// script.js
 
document.addEventListener('DOMContentLoaded', () => {
    const nfsfu234FormValidation = new NFSFU234FormValidation(); // Create a basic instance
 
    // Example custom error messages for your form
    const customErrorMessages = {
        "text": "EMPTY FIELD",
        "select": "SELECT FIELD IS REQUIRED",
        "email": {
            "empty": "EMPTY EMAIL",
            "format": "The email is not in the right format",
        },
        // ... Other field types and messages
    };
 
    // Example form details object
    const formDetails = {
        form: "contactForm", // Replace "contactForm" with the ID of your form
        isErrorMessageInline: true,
        customErrorMessages: customErrorMessages,
    };
 
    // Example AJAX options object
    const ajaxOptions = {
        url: "https://api.domain.com/",
        RequestMethod: "POST",
        RequestHeader: {
            "Content-Type": "application/json",
        }
    };
 
    // Create a customized instance
    const nfsfu234FormValidation = new NFSFU234FormValidation(formDetails, ajaxOptions);
});

Common Methods

Here are some common methods you might use with the NFSFU234FormValidation library.

submit() method. Read More…


// This function will detect the form and submit to the default URL set in the action HTML5 attribute
const submitResponse = nfsfu234FormValidation.submit(form);
submitResponse
    .then((response) => {
        console.log(response); // Logs the response to your browser's console
    })
    .catch((error) => {
        console.error(error);
    });

validate() method. Read More…


form.querySelector("button[type=submit]").addEventListener('click', () => {
    nfsfu234FormValidation.validate(form, (response) => {
        const { message, type, data, code } = response;
        console.log(message);
 
        if (message !== 'success' && type !== 'success' && code !== 200) {
            const allInputsErrorMessages = response.data.data.inputs;
            const allTextareasErrorMessages = response.data.data.textareas;
            const allSelectsErrorMessages = response.data.data.selects;
 
            console.log(allInputsErrorMessages);
            console.log("");
            console.log(allTextareasErrorMessages);
            console.log("");
            console.log(allSelectsErrorMessages);
 
            return false;
        }
 
        console.log("Your form has been validated✅.");
    });
});

ajax() method. Read More…


const AJAXOptions = {
    url: 'https://api.domain.com/', // URL for the AJAX request
    RequestMethod: 'GET', // Request method
    RequestHeader: {
        'Content-Type': 'application/json', // Example request header
        // Add other request headers if needed
    },
};
 
nfsfu234FormValidation.ajax(AJAXOptions)
    .then((response) => {
        // Success: Server response received in JSON format
        console.log('Request successful', response);
    })
    .catch((error) => {
        // Error: AJAX request failed or rejected
        console.error('Request failed', error);
    });

For more methods and detailed explanations, visit the method’s documentation page.

Armed with this knowledge, you’re all set to proficiently initialize and employ the NFSFU234FormValidation Library within your projects. So therefore, Congratulations! You’ve successfully integrated NFSFU234FormValidation into your project, enhancing your ability to validate form inputs and deliver exceptional user experiences. Happy coding! 🚀👨‍💻.