@sycoraxya/validateJS

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


// ...Checkbox group
// ...Radio group
// ...Select
// ...Text/E-mail
// ...Textarea
//
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
//
// Standard option
// select 1
// select 2
//
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
//
// Standard option
// select 1
// select 2
//
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
//


// ...Checkbox group
// ...Radio group
// ...Select
// ...Text/E-mail
// ...Textarea
//
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";
``