Pristine - Vanilla javascript form validation library

{:.hide}

~4kb minified, ~2kb gzipped, no dependencies

Living demo

Some examples of use can be found here.

Usage

Include the javascript file in your html head or just before the closing body tag

Now create some form and validate

window.onload = function () {

var form = document.getElementById("form1");

// create the pristine instance
var pristine = new Pristine(form);

form.addEventListener('submit', function (e) {
   e.preventDefault();

   // check if the form is valid
   var valid = pristine.validate(); // returns true or false

});
};

That's it

It automatically validates

required, min, max, minlength, maxlength

email, number

Pristine

3

• form The form element

• config An object containing the configuration. Default is bootstrap's configuration which is

let defaultConfig = {
    // class of the parent element where the error/success class is added
    classTo: 'form-group',
    errorClass: 'has-danger',
    successClass: 'has-success',
    // class of the parent element where error text element is appended
    errorTextParent: 'form-group',
    // type of element to create for the error text
    errorTextTag: 'div',
    // class of the error text element
    errorTextClass: 'text-help' 
};

• live A boolean value indicating whether pristine should validate as you type, default is

  true

Install

$ npm install pristinejs --save

Custom Validator

pristine.addValidator(nameOrElem, handler, errorMessage, priority, halt);

Add a custom validator to a field

var pristine = new Pristine(document.getElementById("form1"));

var elem = document.getElementById("email");
// A validator to check if the first letter is capitalized
pristine.addValidator(elem, function(value) {
    // here this refers to the respective input element
    if (value.length && value[0] === value[0].toUpperCase()){
        return true;
    }
    return false;
}, "The first character must be capitalized", 2, false);

Add a global custom validator

// A validator to check if the input value is within a specified range
// Global validators must be added before creating the pristine instance

Pristine.addValidator("my-range", function(value, param1, param2) {
    // here this refers to the respective input element
    return parseInt(param1) <= value && value <= parseInt(param2)
}, "The value (${0}) must be between ${1} and ${2}", 5, false);

Now you can assign it to your inputs like this

Add custom error messages

Add an attribute like

data-pristine--message

ValidatorName

required

email

min

max

Built-in validators

| Name | Usage | Description| | --- | ---- | ----- | |

required

required

data-pristine-required

email

type="email"

data-pristine-type="email"

number

type="number"

data-pristine-type="number"

integer

data-pristine-type="integer"

minlength

minlength="10"

data-pristine-minlength="10"

maxlength

maxlength="10"

data-pristine-maxlength="10"

min

min="20"

data-pristine-min="20"

max

max="100"

data-pristine-max="100"

pattern

pattern="/[a-z]+$/i"

data-pristine-pattern="/[a-z]+$/i"

\

\\

equals

data-pristine-equals="#field-selector"

API

Pristine(form, config, live)
Constructor

| Parameter | Default | Required? | Description| | --- | ---- | ----- | ---- | |

form

config

live

true

pristine.validate(inputs, silent)
Validate the form or field(s)

| Parameter | Default | Required? | Description| | --- | ---- | ---- | --- | |

inputs

document.getElement...

document.querySelector...

jquery

silent

false

silent

true

pristine.addValidator(elem, fn, msg, priority, halt)
Add a custom validator

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

elem

fn

fn("myValue", 10, 20, "dhaka")

this

message

${0}

${1}

${0}

myValue

${1}

10

${2}

20

${3}

dhaka

priority

halt

false

true

Pristine.addValidator(name, fn, msg, priority, halt)
Add a global custom validator

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

name

data-pristine-

....

pristine.getErrors(input)
Get the errors of the form or a specific field

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

input

input

validate()

pristine.addError(input, error)
Add A custom error to an input element

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

input

error

pristine.setGlobalConfig(config)
Set the global configuration

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

config

Pristine.setLocale(locale)
Set the current locale globally

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

locale

Pristine.addMessages(locale, messages)
Set the current locale globally

| Parameter | Default | Required? | Description| | --- | ---- | ----- | --- | |

locale

messages

pristine.reset()
Reset the errors in the form

pristine.destroy()
Destroy the pristine object

The goal of this library is not to provide every possible type of validation and thus becoming a bloat. The goal is to provide most common types of validations and a neat way to add custom validators.

License

MIT