### Install PristineJS via npm Source: https://pristine.js.org/ Install the PristineJS library using npm for use in your project. ```bash $ npm install pristinejs --save ``` -------------------------------- ### Basic Form Validation Setup Source: https://pristine.js.org/ Initialize PristineJS with a form element and set up an event listener for form submission to trigger validation. ```javascript 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 }); }; ``` -------------------------------- ### Add Global Custom Validator Source: https://pristine.js.org/ Adds a global custom validator that can be used across multiple fields. This example validates if a number is within a specified range. ```javascript // 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); ``` -------------------------------- ### Add Custom Validator to a Field Source: https://pristine.js.org/ Adds a custom validator to a specific form field. This example checks if the first character of the input is capitalized. ```javascript 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); ``` -------------------------------- ### Pristine Constructor Source: https://pristine.js.org/ Initializes a new Pristine instance for a given form element. It can optionally take a configuration object and a live validation flag. ```APIDOC ## Pristine(form, config, live) ### Description Initializes a new Pristine instance for a given form element. ### Parameters #### Path Parameters - **form** (element) - Required - The form element to be validated. - **config** (object) - Optional - The configuration object for Pristine. - **live** (boolean) - Optional - Defaults to `true`. If true, Pristine will validate as you type. ``` -------------------------------- ### pristine.setGlobalConfig Source: https://pristine.js.org/ Sets the global configuration options that will be applied to all new Pristine instances. ```APIDOC ## pristine.setGlobalConfig(config) ### Description Sets the default configuration globally for all forms. ### Parameters #### Path Parameters - **config** (object) - Required - The configuration object to set globally. ``` -------------------------------- ### PristineJS Default Configuration Source: https://pristine.js.org/ The default configuration object for PristineJS, which includes classes for error/success states and error message display. ```javascript 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' }; ``` -------------------------------- ### Include PristineJS Script Source: https://pristine.js.org/ Include the PristineJS javascript file in your HTML. This can be placed in the head or just before the closing body tag. ```html ``` -------------------------------- ### Pristine.addMessages Source: https://pristine.js.org/ Adds custom error messages for a specific locale, allowing for internationalization of validation feedback. ```APIDOC ## Pristine.addMessages(locale, messages) ### Description Adds custom error messages for a given locale. ### Parameters #### Path Parameters - **locale** (string) - Required - The locale for which to add messages. - **messages** (object) - Required - An object where keys are validator names and values are the corresponding error message strings. ``` -------------------------------- ### pristine.destroy Source: https://pristine.js.org/ Cleans up and removes the Pristine instance from the form, releasing any associated resources. ```APIDOC ## pristine.destroy() ### Description Destroys the Pristine object and removes its event listeners. ``` -------------------------------- ### Pristine.setLocale Source: https://pristine.js.org/ Sets the global locale for error messages, ensuring they are displayed in the specified language for all new Pristine forms. ```APIDOC ## Pristine.setLocale(locale) ### Description Sets the current locale globally. Error messages on new Pristine forms will be displayed according to this locale. ### Parameters #### Path Parameters - **locale** (string) - Required - The locale to set (e.g., 'en', 'fr'). ``` -------------------------------- ### pristine.addError Source: https://pristine.js.org/ Manually adds a custom error message to a specific input element. ```APIDOC ## pristine.addError(input, error) ### Description Manually adds a custom error to an input element. ### Parameters #### Path Parameters - **input** (element) - Optional - The input element to which the error should be added. - **error** (string) - Required - The error string to add. ``` -------------------------------- ### pristine.reset Source: https://pristine.js.org/ Resets all validation errors currently displayed on the form. ```APIDOC ## pristine.reset() ### Description Resets the errors in the form. ``` -------------------------------- ### pristine.getErrors Source: https://pristine.js.org/ Retrieves the validation errors for the entire form or a specific input element. This method should be called after `validate()` has been executed. ```APIDOC ## pristine.getErrors(input) ### Description Gets the errors of the form or a specific field. `validate()` must be called before this method to populate errors correctly. ### Parameters #### Path Parameters - **input** (element) - Optional - The input element for which to retrieve errors. If not provided, all form errors are returned as an object. ``` -------------------------------- ### pristine.validate Source: https://pristine.js.org/ Validates the entire form or specific input fields. It can be configured to silently validate without displaying error messages. ```APIDOC ## pristine.validate(inputs, silent) ### Description Validates the form or field(s). If `inputs` is not provided, the entire form is validated. The `silent` option prevents error messages from being displayed. ### Parameters #### Path Parameters - **inputs** (element | NodeList | jQuery) - Optional - The input element(s) to validate. If not provided, the entire form is validated. - **silent** (boolean) - Optional - Defaults to `false`. If true, error messages will not be shown. ``` -------------------------------- ### Pristine.addValidator Source: https://pristine.js.org/ Adds a global custom validator that can be applied to any form field using a data attribute. ```APIDOC ## Pristine.addValidator(name, fn, message, priority, halt) ### Description Adds a global custom validator. This validator can be used on any form field by specifying its `name` in a `data-pristine-` attribute. ### Parameters #### Path Parameters - **name** (string) - Required - The name of the validator. This will be used as the attribute name (e.g., `data-pristine-name`). - **fn** (function) - Required - The validation function. Same signature as `pristine.addValidator`. - **message** (string | function) - Required - The error message. Same as `pristine.addValidator`. - **priority** (number) - Optional - Defaults to `1`. Validator priority. - **halt** (boolean) - Optional - Defaults to `false`. Whether to halt validation on the current field. ``` -------------------------------- ### Assign Global Custom Validator to Input Source: https://pristine.js.org/ Assigns a globally defined custom validator ('my-range') to an input field using a data attribute, specifying the range parameters. ```html ``` -------------------------------- ### pristine.addValidator Source: https://pristine.js.org/ Adds a custom validator function to a specific form element. This allows for flexible and reusable validation logic. ```APIDOC ## pristine.addValidator(elem, fn, message, priority, halt) ### Description Adds a custom validator to a specific DOM element. The validator function receives the input's value and attribute values as parameters. ### Parameters #### Path Parameters - **elem** (element) - Required - The DOM element to which the validator is applied. - **fn** (function) - Required - The validation function. It receives the input value and attribute values. `this` inside the function refers to the input element. - **message** (string | function) - Required - The error message to display. Supports templating with `${index}` for attribute values or can be a function returning the error string. - **priority** (number) - Optional - Defaults to `1`. The priority of the validator. Higher values are executed earlier. - **halt** (boolean) - Optional - Defaults to `false`. If true, halts further validation on the current field after this validator runs. ``` -------------------------------- ### Add Custom Error Message for Required Field Source: https://pristine.js.org/ Applies a custom error message to the 'required' validator for an input field using a data attribute. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.