Form Validation Example

"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { p: "p", ..._provideComponents(), ...props.components }, {CodeBlock, Headings, Link, Paragraph, RelatedLinks} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!Headings) _missingMdxReference("Headings", false); if (!Headings.h2) _missingMdxReference("Headings.h2", true); if (!Headings.h3) _missingMdxReference("Headings.h3", true); if (!Link) _missingMdxReference("Link", true); if (!Paragraph) _missingMdxReference("Paragraph", true); if (!RelatedLinks) _missingMdxReference("RelatedLinks", true); return _jsxs(_Fragment, { children: [_jsx(Headings.h2, { children: "🚀 Usage" }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsxs(_components.p, { children: ["The NFSFU234FormValidation Library is a versatile toolbox that empowers you to validate forms, submit them, and handle AJAX requests effortlessly.\nThis guide will walk you through setting up and using the NFSFU234FormValidation library. For detailed installation and initialization instructions, please refer to the ", _jsx(Link, { href: "/installation", className: "text-blue-500", children: "Installation" }), " and ", _jsx(Link, { href: "/initialization", className: "text-blue-500", children: "Initialization" }), " sections."] }) }), "\n", _jsx(Headings.h3, { children: "Step 1: Import the Library" }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsxs(_components.p, { children: ["To start using the NFSFU234FormValidation library, add the following CDN link in the ", _jsx("code", { children: "" }), " section of your HTML document."] }) }), "\n", _jsx(CodeBlock, { children: ` Form Validation Example ` }), "\n", _jsx(Headings.h3, { children: "Step 2: Create Your HTML Form" }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsx(_components.p, { children: "Create an HTML form that you want to validate. Include the form ID so the library can detect it." }) }), "\n", _jsx(CodeBlock, { children: `

Contact Us

` }), "\n", _jsx(Headings.h3, { children: "Step 3: Initialize the Library" }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsxs(_components.p, { children: ["Create a JavaScript file (e.g., ", _jsx("code", { children: "script.js" }), ") and initialize the NFSFU234FormValidation library for your form."] }) }), "\n", _jsx(CodeBlock, { children: `// 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); });` }), "\n", _jsx(Headings.h3, { children: "Common Methods" }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsx(_components.p, { children: "Here are some common methods you might use with the NFSFU234FormValidation library." }) }), "\n", _jsxs("ul", { children: [_jsxs("li", { children: [_jsxs("h4", { class: "font-semibold text-md", children: ["submit() method. ", _jsx("a", { href: "/docs/submit", class: "text-[11px] text-blue-400", children: "Read More..." })] }), _jsx(CodeBlock, { children: `// 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); });` })] }), _jsxs("li", { children: [_jsxs("h4", { class: "font-semibold text-md", children: ["validate() method. ", _jsx("a", { href: "/docs/validate", class: "text-[11px] text-blue-400", children: "Read More..." })] }), _jsx(CodeBlock, { children: `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✅."); }); });` })] }), _jsxs("li", { children: [_jsxs("h4", { class: "font-semibold text-md", children: ["ajax() method. ", _jsx("a", { href: "/docs/ajax", class: "text-[11px] text-blue-400", children: "Read More..." })] }), _jsx(CodeBlock, { children: `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); });` })] })] }), "\n", _jsx(Paragraph, { className: "mb-6", children: _jsxs(_components.p, { children: ["For more methods and detailed explanations, visit the ", _jsx("a", { href: "#methods-documentation", children: "method's documentation" }), " page."] }) }), "\n", _jsx(Paragraph, { children: _jsx(_components.p, { children: "Armed with this knowledge, you're all set to proficiently initialize and employ the NFSFU234FormValidation Library within your projects.\nSo therefore, Congratulations! You've successfully integrated NFSFU234FormValidation into your project, enhancing your ability to validate form inputs and deliver exceptional user experiences.\nHappy coding! 🚀👨‍💻." }) }), "\n", _jsx(RelatedLinks, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }