Facile (the French word for “easy”, pronounced fa·sil) is an HTML form validator that is inspired by Laravel’s validation style and is designed for simplicity of use.

Installation

You can install this package via npm or yarn.

npm i @upjs/facile-validator

# or
yarn add @upjs/facile-validator

Usage

HTML:

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

The rules for each field are separated with a pipe character (vertical line) |. In this example, we’ve assigned 4 rules for that input:

• bail
• required
• number
• between (with two arguments: 1 and 10)

JavaScript:

import { Validator, enLang as en } from '@upjs/facile-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,
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  // Call validate method to start validation
  v.validate();
});


// Handle error-free validation
v.on('validation:success', () => {
  alert('Nice! The form was validated without any errors');
});

// Handle failed validation
v.on('validation:failed', () => {
  alert('Oops! There are some errors in the form.');
});

Now every input with data-rules attribute in the form will be validated.

Handling Events

When the validation starts, ends, succeeds, or fails, there are easy ways to handle these events. We do this with the help of the Hooks. A hook is simply a function that you define to be executed when a particular event occurs.

There are five types of events that can be handled with the hooks:

• validation:start
• validation:end
• validation:success
• validation:failed
• field:error

To attach a hook to these events, use <code>on</code> method:

v.on(event_name, () => {
  // This function will be executed when the respective event occurs.
});

You can also attach those hooks in the config object:

const v = new Validator(form, {
  // ...
  on: {
    'validation:success': () => {
      alert('Success! Form validated with no errors');
    },
  },
});

Available Validation Rules:

• accepted
• alpha
• alpha-num
• alpha-num-dash
• bail
• between
• digits
• email
• ends-with
• int
• max
• min
• num-dash
• number
• nullable
• required
• size
• starts-with
• in
• Your rule?

This package has a lot of features & validation rules with code examples. If you want to learn more about them, you can visit its complete documentation on Github.