Pristine icon indicating copy to clipboard operation
Pristine copied to clipboard

TS types

Open MangoMarcus opened this issue 10 months ago • 0 comments

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

MangoMarcus avatar Apr 04 '24 13:04 MangoMarcus