formvalidation

Documentation officiel : https://formvalidation.io

Installation

npm install @cafefrappe/formvalidation

Import

Dans le fichier TS :

import {formValidation, plugins} from '@cafefrappe/formvalidation';

Usage

private _initForm(): void {

    const form: HTMLFormElement = document.querySelector('#form');
    
    formValidation(form, {
        fields: {
            'login': {
                validators: {
                    notEmpty: {
                        message: 'Ce champ est requis.'
                    }
                }
            },
            'password': {
                validators: {
                    notEmpty: {
                        message: 'Ce champ est requis.'
                    }
                }
            }
        },
        plugins: {
            trigger: new plugins.Trigger(),
            submit: new plugins.SubmitButton(),
            defaultSubmit: new plugins.DefaultSubmit(),
            message: new plugins.Message({
                container: (field: string, element: HTMLElement): HTMLElement => {
    
                    return element.closest('.form-group') as HTMLElement;
                }
            })
        }
    })
    .on('core.validator.validating', (e: { element: HTMLElement }): void => {
    
        (e.element as HTMLElement).closest('.form-group').classList.remove('has_error');
    })
    .on('plugins.message.displayed', (e: { element: HTMLElement }): void => {
    
        (e.element as HTMLElement).closest('.form-group').classList.add('has_error');
    });
}

Les messages d'erreurs relatifs à un champ seront injectés à la fin du container parent ayant la classe "form-group" :

<div class="form-group">
    <input type="text" name="login">
    <!-- La DIV ci-dessous sera directement injecté par le FormValidation lors de l'initialisation du formulaire. -->
    <div class="fv-plugins-message-container">
        <!-- Pour chaque erreur de validation, une DIV sera injectée. -->
        <div data-field="login" data-validator="notEmpty">Ce champ est requis.</div>
    </div>
</div>

Utilisation des libraries externes

Par défaut la variable plugins n'intègre que les plugins natifs utilisés couramment pour le bon fonctionnement de la librairie.

FormValidation met à disposition une liste de plugin externes pouvant être intégrés au besoin : https://formvalidation.io/guide/plugins#external-plugins

Pour intégrer un plugin externe il suffit d'importer sa classe qui est accessible à la racine du package, et qui a pour identifiant le NOM_DU_PLUGIN concaténé avec Plugin :

Exemple avec le Plugin Recaptcha (https://formvalidation.io/guide/plugins/recaptcha) :

import {formValidation, RecaptchaPlugin} from '@cafefrappe/formvalidation';

const form: HTMLFormElement = document.querySelector('#form');

formValidation(form, {
    plugins: {
        recaptcha: new RecaptchaPlugin({
            element: 'captchaContainer',
            language: 'fr'
        })
    }

Compatibilité

Pour supporter les anciens navigateurs il est nécessaire d'importer le CDN 'es6-shim' directement dans le template HTML :

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>

Dans le but d'éviter toute erreur de typage liée à la librairie, il est nécessaire d'ajouter l'instruction suivante dans le fichier tslint.json :

{
    "linterOptions": {
        "exclude": [
            "node_modules/**"
        ]
    }
}