Pristine
Pristine copied to clipboard
TS types
The types I wrote for Pristine, in case they're useful to anyone else
// pristinejs.d.ts
declare module 'pristinejs' {
interface PristineCongig {
classTo?: 'string';
errorClass?: 'string';
successClass?: 'string';
errorTextParent?: 'string';
errorTextTag?: 'string';
errorTextClass?: 'string';
}
/**
* 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
*/
type PristineValidator = (this: HTMLElement, value: string, ...params: string[]) => boolean;
class Pristine {
/**
* @param form The form element
* @param config The config object
* @param live Whether pristine should validate as you type
*/
constructor(form: HTMLFormElement, config?: PristineCongig, live?: boolean);
/**
* Add a global custom validator
*
* @param name A string, the name of the validator, you can then use `data-pristine-<NAME>` attribute in form fields to apply this validator
* @param fn The validator function
* @param msg 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`. It can also be a function which should return the error string. The values and inputs are available as function arguments
* @param priority Priority of the validator function. The higher the value, the earlier it gets called when there are multiple validators on one field.
* @param halt 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.
*/
static addValidator(
elem: HTMLElement,
fn: PristineValidator,
msg: string | ((value: string, ...params: string[]) => string),
priority: number,
halt: boolean,
): void;
/**
* Set the current locale globally
*
* @param locale Error messages on new Pristine forms will be displayed according to this locale
*/
static setLocale(locale: string): void;
/**
* @param locale The corresponding locale
* @param messages Object containing validator names as keys and error texts as values
*/
static addMessages(locale: string, messages: Record<string, string>): void;
/**
* Checks whether the form/input elements are valid
*
* @param input Input element(s) or a jquery selector, null for full form validation
* @param silent Do not show error messages, just return true/false
* @returns Return true when valid false otherwise
*/
validate(input: NodeList, silent?: boolean): boolean;
/**
* Add a custom validator
*
* @param elem The dom element where validator is applied to.
* @param fn The validator function
* @param msg 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`. It can also be a function which should return the error string. The values and
* inputs are available as function arguments
* @param priority Priority of the validator function. The higher the value, the earlier it gets
* called when there are multiple validators on one field.
* @param halt 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.
*/
addValidator(
elem: HTMLElement,
fn: (this: HTMLElement, value: string, ...params: string[]) => boolean,
msg: string | ((value: string, ...params: string[]) => string),
priority: number,
halt: boolean,
): void;
/**
* Get the errors of the form or a specific field
*
* 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.
*/
getErrors(input: HTMLElement): string[];
getErrors(): { input: HTMLElement; errors: string[] }[];
/**
* Adds error to a specific field
*
* @param input The input element to which the error should be given
* @param error The error string
*/
addError(input: HTMLElement, error: string): void;
/**
* Set the default configuration globally to use in all forms.
*
* @param config The config object
*/
setGlobalConfig(config: PristineCongig): void;
/**
* Reset the errors in the form
*/
reset(): void;
/**
* Destroy the pristine object
*/
destroy(): void;
/** Not a part of public API */
form: HTMLFormElement;
/** Not a part of public API */
config: PristineCongig;
/** Not a part of public API */
live: boolean;
/** Not a part of public API */
fields: (HTMLElement & {
pristine: {
input: HTMLElement;
validators: PristineValidator[];
params: string[];
messages: string[];
self: Pristine;
};
})[];
}
export default Pristine;
}