validateJS

Front-end form validation

Only 4kb gzipped!

Installation:

npm i @sycoraxya/validateJS --save-dev

or

yarn add @sycoraxya/validateJS --dev

Usage:

Add the following line to your script

import Validate from "@sycoraxya/validateJS";

Or add the folder to your webpack.config:

resolve: {
  modulesDirectories: [
    'node_modules/@sycoraxya'
  ]
}

// And add the following line to your scripts
import Validate from "validateJS";

API:

Validate all inputs in a wrapper

To validate all inputs in a wrapper, simply pass the element you want to check into new Validate().

// <form id="checkout">
//   ...Checkbox group
//   ...Radio group
//   ...Select
//   ...Text/E-mail
//   ...Textarea
// </form>
let form = document.getElementById('checkout');
new Validate(form); // Validate{errors: boolean, erroredAt: HTMLElement[]}

Check text, email & textarea inputs

To check a text input, simply pass the element you want to check into Validate.text().

To check a textarea, pass the element into Validate.textarea().

Returns true if the element is required & not empty or , in the case of an email input, is required and a valid e-mail address.

Also returns the element if it's invalid.

// <input type="text" placeholder="text input" id="textinput" required>
// <input type="email" placeholder="email input" id="emailinput" required>
// <textarea name="textarea" id="textarea" required></textarea>
let text = document.getElementById('textinput');
Validate.text(text); // {valid: boolean, type: 'text', (element: HTMLElement)}
let email = document.getElementById('emailinput');
Validate.text(email); // {valid: boolean, type: 'email', (element: HTMLElement)}
let textarea = document.getElementById('textarea');
Validate.textarea(textarea); // {valid: boolean, (element: HTMLElement)}

Check checkbox group

To check a checkbox group, simply pass all elements you want to check into Validate.checkbox() as an array or HTMLCollection.

Returns true if the checkbox elements of the specified group are :

1. required & one of them is checked
2. not required

Also returns the elements if any of them are invalid.

// <div id="check">
//   <input type="checkbox" name="foo" value="check1" required>
//   <input type="checkbox" name="foo" value="check2" required>
// </div>
let checkboxes = document.getElementById('check').getElementsByTagName('input');
Validate.checkbox(checkboxes); // {valid: boolean, (elements: HTMLElement[])}

Check radio group

To check a radio group, simply pass all elements you want to check into Validate.radio() as an array or HTMLCollection.

Returns true if the radio elements of the specified group are :

1. required & one of them is checked
2. not required

Also returns the elements if any of them are invalid.

// <div id="radio">
//   <input type="radio" name="foo" value="radio1" required>
//   <input type="radio" name="foo" value="radio2" required>
// </div>
let radios = document.getElementById('radio').getElementsByTagName('input');
Validate.radio(radios); // {valid: boolean, (elements: HTMLElement[])}

Check select box

To check a select box, simply pass the element you want to check into Validate.select().

Returns true if the specified required select element's selected option is not the first one.

Also returns the element if it's invalid.

// <select required id="select">
//   <option>Standard option</option>
//   <option value="select1n">select 1</option>
//   <option value="select2n">select 2</option>
// </select>
let select = document.getElementById('select');
Validate.select(select); // {valid: boolean, (element: HTMLElement[])}

Display custom messages

To display custom messages just call Validate.displayMessage()

// <input type="email" placeholder="email input" id="emailinput">
let element = document.getElementById('emailinput');
Validate.displayMessage(element, 'Custom message');

SETTINGS:

Ignore specific fields

Specific fields can be ignore by passing the following to the settings.ignore object as an array:

1. their name for radios and checkboxes.
2. their class for textboxes and selects.

// <input type="text" class="captcha"/>
let settings = {
  ignore: ['captcha']
};
new Validate(captchaInput, settings);

// <div class="checkboxes" id="checkboxes">
//   <input type="checkbox" name="foo" id="check1n">
//   <input type="checkbox" name="foo" id="check2n">
// </div>
let settings = {
  ignore: ['foo']
};
new Validate(checkboxes, settings);

Group checkboxes and radios

Checkboxes and radios can be grouped if only one of several name groups need to be valid.

// <div class="checkboxes" id="checkboxes">
//   <input type="checkbox" name="foo" value="check1n" required checked>
//   <input type="checkbox" name="foo" value="check2n" required>
// </div>
// <div class="checkboxes2" id="checkboxes2">
//   <input type="checkbox" name="bar" value="check1m" required>
//   <input type="checkbox" name="bar" value="check2m" required>
// </div>
let settings = {
  grouped: [
    ['foo', 'bar']
  ]
};
new Validate(checkboxes, settings); // Returns Validate{errors: false}

Specify if selects have a default value

Default: true

Usually, selects return an error when the first option is selected. That behaviour can be changed so it essentially never returns errors.

// <select required id="select">
//   <option>Standard option</option>
//   <option value="select1n">select 1</option>
//   <option value="select2n">select 2</option>
// </select>
let settings = {
  hasMakeAChoice: false
};
new Validate(select, settings); // Returns Validate{errors: false}

Disable errors

Default: true

Displaying errors can be disabled by setting showErrors to false

// <form id="checkout">
//   ...Checkbox group
//   ...Radio group
//   ...Select
//   ...Text/E-mail
//   ...Textarea
// </form>
let settings = {
  showErrors: false
};
new Validate(select, settings);

Display errors before the input

Default: 'after'

Errors can be displayed before or after the input that threw the error

// <input type="email" placeholder="email input" id="emailinput">
let setting = {
    errorPos: 'before'	
};
new Validate(email, settings); // Prints <error /> <input />

POLYFILL:

IE10 support

Current polyfill version: 0.2.6

File size: 9kb.

To include the polyfilled version add the following line to your script:

import Validate from "@sycoraxya/validateJS/dist/polyfill/polyfill";