Front-end form validation
validateJS
===================
Only 4kb gzipped!
npm i @sycoraxya/validateJS --save-devor
yarn add @sycoraxya/validateJS --dev
*
javascript
import Validate from "@sycoraxya/validateJS";
`Or add the folder to your webpack.config:
`javascript
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().
`javascript
//
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.
`javascript
//
//
//
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.
`javascript
//
//
//
//
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.
`javascript
//
//
//
//
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.
`javascript
//
let select = document.getElementById('select');
Validate.select(select); // {valid: boolean, (element: HTMLElement[])}
`#### Display custom messages
To display custom messages just call Validate.displayMessage()
`javascript
//
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.
`javascript
//
let settings = {
ignore: ['captcha']
};
new Validate(captchaInput, settings);//
//
//
//
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.
`javascript
//
//
//
//
//
//
//
//
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.
`javascript
//
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
`javascript
//
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
`javascript
//
let setting = {
errorPos: 'before'
};
new Validate(email, settings); // Prints
`*
POLYFILL:
#### IE10 support
Current polyfill version: 0.2.6
File size: 9kb.
To include the polyfilled version add the following line to your script:
`javascript
import Validate from "@sycoraxya/validateJS/dist/polyfill/polyfill";
``