gildi v1.0.6

gildi

A simple, Laravelian, way to validate JavaScript forms.

Table of Contents

1. Installation
2. Introduction
3. Result
4. Nested Objects
5. Comma Separated Attributes
6. Wildcard
7. Custom Error Messages
8. Usage with Vue 3
9. Rules
   • after
   • ascii
   • before
   • between
   • boolean
   • confirmed
   • date
   • different
   • email
   • ends_with
   • hex
   • in
   • ip
   • mac_address
   • max
   • mimetypes
   • min
   • not_in
   • not_regex
   • numeric
   • password
   • regex
   • required
   • required_if
   • required_unless
   • required_with
   • required_with_all
   • required_without
   • required_without_all
   • same
   • starts_with
   • url
   • uuid

Installation

npm

npm i gildi

CDN

<script src="//unpkg.com/gildi"></script>

<script>
    const validate = Gildi.validate;
</script>

Introduction

import { validate } from 'gildi';

const form = {
    email: 'test@example.com',
    password: 'password123',
    password_confirmation: '',
};

let rules = {
    email: 'required|email',
    password: 'required|min:8|confirmed',
};

// or

rules = {
    email: ['required', 'email'],
    password: ['required', 'min:8', 'confirmed'],
};

const $v = validate(form, rules);

Result

{
    "$valid": false,
    "$errors": {
        "password": ["The password confirmation does not match."]
    },
    "email": {
        "required": true,
        "email": true
    },
    "password": {
        "required": true,
        "min": true,
        "confirmed": false
    }
}

Nested objects

import { validate } from 'gildi';

const form = {
    name: 'John Doe',
    job: {
        title: 'Full-stack Developer',
        email: 'jd@example.com',
    },
};

let rules = {
    name: 'required',
    job: {
        title: 'required|ends_with:Developer',
        email: 'required|email',
    },
    email: 'required|email',
};

// or

rules = {
    name: 'required',
    'job.title': 'required|ends_with:Developer',
    'job.email': 'required|email',
    email: 'required|email',
};

const $v = validate(form, rules);

Comma Separated Attributes

import { validate } from 'gildi';

const form = {
    email: 'test@example.com',
    password: 'password123',
    job: {
        email: 'www.company.com',
    },
};

let rules = {
    'email,password': 'required',
    'email,job.email': 'email',
};

// or (if you're feeling really crazy)

const requiredFields = ['email', 'password'];
const emailFields = ['email', 'job.email'];

rules = {
    [requiredFields]: 'required',
    [emailFields]: 'email',
};

const $v = validate(form, rules);

Wildcard

You can also use a Wildcard to match fields. If you need to Exclude anything, you can use one or multiple Exclamation Marks (!).

import { validate } from 'gildi';

const form = {
    name: '',
    email: '',
    password: '',
    job: {
        email: '',
        title: '',
        address: '',
    },
};

const $v = validate(form, {
    //  'email' and anything under 'job' is required, except for job.title and job.address
    'email, job.*!job.title!job.address': 'required',
    // anything containing 'email' should be an email, except if it is under 'job'
    '*email!job.*': 'email',
});

Custom Error Messages

import { validate } from 'gildi';

const form = {
    email: 'test@example.com',
    password: 'password123',
};

const rules = {
    email: 'required|email',
    password: 'required|min:8|confirmed',
};

const errors = {
    'email.required': 'The :attribute attribute is required',
    'email.email': 'Not a valid email address',
    'password.min': 'The password needs to be at least :args characters',
    'password.confirmed': 'The passwords do not match',
};

const $v = validate(form, rules, errors);

Usage with Vue 3

import { useValidate } from 'gildi/vue';

const form = reactive({
    password: '',
    email: '',
});

const $v = useValidate(form, {
    'email, password': 'required',
    email: 'email',
    password: 'min:8',
});

Rules

after

const rules = {
    dob: 'after:2000-01-01',
};

ascii

const rules = {
    text: 'ascii',
};

before

const rules = {
    dob: 'before:2000-01-01',
};

between

const rules = {
    age: 'between:18,122',
};

boolean

const rules = {
    hasPermission: 'boolean',
};

confirmed

const rules = {
    password: 'confirmed',
};

date

const rules = {
    dob: 'date',
};

different

const rules = {
    password: 'different:username',
};

email

const rules = {
    email: 'email',
};

ends_with

const rules = {
    text: 'ends:world!',
};

hex

const rules = {
    color: 'hex',
};

in

const rules = {
    name: 'in:guest,user,admin',
};

ip

const rules = {
    ip: 'ip',
};

mac_address

const rules = {
    mac_address: 'mac_address',
};

max

const rules = {
    age: 'max:122',
    password: 'max:16',
};

mimetypes

const rules = {
    file: 'mimetypes:image/*',
};

min

const rules = {
    age: 'min:18',
    password: 'min:8',
};

not_in

const rules = {
    role: 'not_in:guest,user,admin',
};

not_regex

const rules = {
    not_a_number: 'not_regex:/^[0-9]$/',
};

numeric

const rules = {
    age: 'numeric',
};

password

Minimum eight characters, at least one letter, one number and one special character.

const rules = {
    password: 'password',
};

regex

const rules = {
    number: 'regex:/^[0-9]{6}$/',
};

required

const rules = {
    name: 'required',
};

required_if

const form = {
    role: 'admin',
    email: '',
    age: 18,
    hasCar: '',
};

const rules = {
    email: 'email|required_if:role,admin',
    hasCar: 'boolean|required_if:age,>=,18',
};

required_unless

const form = {
    role: '',
    email: 'test@example.com',
};

const rules = {
    role: 'required_unless:email,test@example.com',
};

required_with

const rules = {
    password: 'required_with:name,email',
};

required_with_all

const rules = {
    password: 'required_with_all:name,email',
};

required_without

const rules = {
    password: 'required_without:name,email',
};

required_without_all

const rules = {
    password: 'required_without_all:name,email',
};

same

const rules = {
    password: 'same:password_confirmation',
};

starts_with

const rules = {
    text: 'starts_with:Hello',
};

url

const rules = {
    url: 'url',
};

uuid

const rules = {
    uuid: 'uuid',
};