Pristine - Vanilla javascript form validation library

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


This documentation is being updated and currently incomplete


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

<script src="dist/pristine.js"  type="text/javascript"></script>

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) {
       // 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 attributes and the value of type attributes like email, number and more..

Pristine takes 3 parameters

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' 


$ 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, elem) {
    if (value.length && value[0] === value[0].toUpperCase()){
        return true;
    return false;
}, "The first character must be capitalized", 2, false);

Add a global validator

// A validator to check if the input value is within a specified range
Pristine.addValidator("my-range", function(value, elem, val1, val2) {
    return parseInt(val1) <= value && value <= parseInt(val2)
}, "The value (${0}) must be between ${1} and ${2}", 5, false);

Now you can assign it to your inputs like this

<input type="text" class="form-control" data-pristine-my-range="10,30" />

Built-in validators

Name Usage Description
required required or data-pristine-required Validates required fields
email type="email" or data-pristine-type="email" Validates email
number type="number" or data-pristine-type="number"  
integer data-pristine-type="integer"  
minlength minlength="10" or data-pristine-minlength="10"  
maxlength maxlength="10" or data-pristine-maxlength="10"  
min min="20" or data-pristine-min="20"  
max max="100" or data-pristine-max="100"  
pattern pattern="/[a-z]+$/i" or data-pristine-pattern="/[a-z]+$/i"  


Pristine(form, config, live)

Parameter Default Required? Description
form -
The form element
config See above
The config object
live true
Whether pristine should validate as you type

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

Parameter Default Required? Description
inputs -
When not given, full form is validated. inputs can be one DOM element or a collection of DOM elements returned by document.getElement..., document.querySelector... or even jquery dom
silent false
Does not show error error messages when silent is true

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

Parameter Default Required? Description
elemOrName -
The dom element when validator is applied on a specific field. A string (the name of the validator) when it’s a global validator, you can then use data-pristine-<NAME> attribute in form fields to apply this validator
fn -
The function that validates the field. Value of the input field gets passed as the first parameter, and the attribute value (split using comma) as the subsequent parameters. For example, for <input data-pristine-my-validator="10,20,dhaka" value="myValue"/>, validator function get called like fn("myValue", 10, 20, "dhaka"). Inside the function this refers to the input element
message -
The message to show when the validation fails. It supports simple templating. ${0} for the input’s value, ${1} and so on are for the attribute values. For the above example, ${0} will get replaced by myValue, ${1} by 10, ${2} by 20, ${3} by dhaka.
priority 1
Priority of the validator function. The higher the value, the earlier it gets called when there are multiple validators on one field.
halt false
Whether to halt validation on the current field after this validation. When true after validating the current validator, rest of the validators are ignored on the current field.

Get the errors of the form or a specific field

Parameter Default Required? Description
input -
When input is given, it returns the errors of that input element, otherwise returns all errors of the form as an object, using input element as key and corresponding errors as value. validate() must be called before expecting this method to return correctly.

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

Parameter Default Required? Description
input -
The input element to which the error should be given
error -
The error string

Set the global configuration

Parameter Default Required? Description
config -
Set the default configuration globally to use in all forms.

Reset the errors in the form

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.