Facile Validator is an HTML form validator inspired by the simplicity of Laravel’s validation style. Just like a wise teacher who carefully checks each student’s homework but does so in a friendly, approachable manner, Facile Validator ensures your form data meets the required standards without overwhelming you with complexity. Let’s dive into the world of form validation!

Table of Contents

• Installation
• Usage
• Validate on Field Change
• Implementation in Frameworks
• Handling Events
• Available Validation Rules
• X-Prefixed Rules
• Localization

Installation

You can easily add Facile Validator to your project by installing it via npm or yarn:

npm i @upjsfacile-validator
# or
yarn add @upjsfacile-validator

Usage

Using Facile Validator is like giving your forms a safety net. You define rules and the validator ensures users play by those rules.

To get started, set up your HTML field with data rules:

<form>
    <input data-rules="bail|required|number|between:1,10" />
</form>

In this example, the input has four rules: bail, required, number, and between (with limits set). Just like a student can only be graded on exercises they’ve completed, the validator enforces the rules you’ve specified.

JavaScript Implementation

Next, let’s bring in the Validator with JavaScript:

import Validator, { enLang as en } from '@upjsfacile-validator';

// Select the container element that contains the fields
const form = document.querySelector('form');

// Create an instance of Validator for the container element
const v = new Validator(form, { lang: en });

// Validate on form submit
form.addEventListener('submit', (e) => {
    e.preventDefault(); 
    v.validate(); 
});

// Handle success and failure
v.on('validation:success', () => alert('Nice! The form was validated without any errors.'));
v.on('validation:failed', () => alert('Oops! There are some errors in the form.'));

Validate on Field Change

New features allow the validation to happen instantly! By enabling onFieldChangeValidation, users receive instant feedback, akin to a teacher watching students during an exam and providing prompts for improvement:

const v = new Validator(form, { 
    onFieldChangeValidation: true,
    onFieldChangeValidationDelay: 1000 // 1 Second delay
});

Implementation in Frameworks

Facile Validator is versatile and can be easily integrated into various frameworks, including React.js.

Handling Events

The validator allows you to manage various events through hooks. Imagine these as alerts from our wise teacher reminding you about important moments during a class:

v.on('validation:start', (form) => {
    console.log('Validation started for:', form);
})

Available Validation Rules

Just like every classroom has its own set of rules, Facile Validator comes with a comprehensive list of validation rules:

• accepted
• alpha
• number
• required
• between
• …and many more!

X-Prefixed Rules

Sometimes, certain rules may require a deeper configuration, which can be elegantly achieved using X-Prefixed Rules. This approach helps keep HTML tidy. It’s similar to using a special pen that highlights only the essential details:

html
<input data-rules="x-regex:zipcode" />

Localization

With built-in support for multiple languages, Facile Validator is like a multilingual teacher, ready to help students from different backgrounds:

import Validator, { enLang as en } from '@upjsfacile-validator';
const v = new Validator(form, { lang: en });

Troubleshooting

If you encounter issues when implementing Facile Validator, consider the following troubleshooting tips:

• Ensure that all your input fields have the appropriate data-rules attributes.
• Check your event listeners to ensure you’re prevent default behavior properly.
• Examine your console for any JavaScript errors that might help identify the problem.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.