Pristine Documentation

You can override default error messages for any validator (including built-in ones) by adding a data-pristine-<ValidatorName>-message attribute to the input element. Replace <ValidatorName> with the name of the validator (e.g., required, email, min, max).

<!-- Custom message for the 'required' validator -->
<input required data-pristine-required-message="My custom message"/>

<!-- Custom message for the 'email' validator -->
<input type="email" data-pristine-email-message="Please enter a valid email address"/>

To use Pristine, include the script in your HTML, then instantiate Pristine by passing the form element. You can then call .validate() during form submission to check if the form is valid.

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

    });
};

Install the pristinejs package using npm to include it in your project.

$ npm install pristinejs --save

Use pristine.addValidator() on a specific DOM element to apply validation logic only to that field. Inside the handler function, this refers to the input element.

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);

To create a validator that can be reused across multiple fields via data attributes, use the static Pristine.addValidator() method. Note: Global validators must be added before creating the Pristine instance.

Once added, apply it to an input using data-pristine-<NAME>="param1,param2".

// 1. Define the global validator
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);

// 2. Use it in HTML
// <input type="text" data-pristine-my-range="10,30" />

Detailed method signatures for the Pristine instance and static methods.

// Constructor
Pristine(form, config, live)

// Instance Methods
pristine.validate(inputs, silent)
pristine.getErrors(input)
pristine.addError(input, error)
pristine.reset()
pristine.destroy()

// Static Methods
Pristine.addValidator(name, fn, msg, priority, halt)
Pristine.setGlobalConfig(config)
Pristine.setLocale(locale)
Pristine.addMessages(locale, messages)