Blog Detail


Facile Validator - A Laravel-inspired Validation for Forms cover image

arrow_back Facile Validator - A Laravel-inspired Validation for Forms

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.


You can install this package via npm or yarn.

npm i @upjs/facile-validator

# or
yarn add @upjs/facile-validator



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

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)


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) => {
  // Call validate method to start validation

// 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.

Published at : 25-04-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project