Validation en direct

Passer à la directive principale


        
        <div class="ontario-form-group">
    <label class="ontario-label" for="text-input-odometer-example">
        Lecture de l’odomètre<span class="ontario-label__flag">(obligatoire)</span>
    </label>
    <div id="text-input-odometer-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
        <span class="ontario-error-messaging__icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </span>
        <span role="alert" id="text-input-odometer-example-error-text" class="ontario-error-messaging__content">
            La lecture de l’odomètre ne doit comprendre que des chiffres.
        </span>
    </div>
    <input required class="ontario-input  ontario-input--10-char-width" type="text" id="text-input-odometer-example" aria-describedby="" aria-invalid="false">
</div>

<div class="ontario-form-group">
    <label class="ontario-label" for="text-input-license-plate-example">
        Numéro de la plaque d’immatriculation<span class="ontario-label__flag">(obligatoire)</span>
    </label>
    <p id="text-input-license-plate-example-hint" class="ontario-hint">Les numéros de plaque d’immatriculation ne doivent comporter que des lettres (de A à Z) ou des chiffres (de 0 à 9) et doivent comporter entre 2 et 8 caractères. Par exemple, AAAA111.</p>
    <div id="text-input-license-plate-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
        <span class="ontario-error-messaging__icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </span>
        <span role="alert" id="text-input-license-plate-example-error-text" class="ontario-error-messaging__content">
            Le format de l’adresse courriel est non valide.
        </span>
    </div>
    <input required class="ontario-input  ontario-input--7-char-width" type="text" id="text-input-license-plate-example" aria-describedBy="text-input-license-plate-example-hint" aria-invalid="false">
</div>

<div class="ontario-form-group">
    <label class="ontario-label" for="text-input-email-example">
        E-mail<span class="ontario-label__flag">(obligatoire)</span>
    </label>
    <div id="text-input-email-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
        <span class="ontario-error-messaging__icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </span>
        <span id="text-input-email-example-error-text" class="ontario-error-messaging__content">
            Le format de l’adresse courriel est non valide.
        </span>
    </div>
    <input required class="ontario-input  ontario-input--20-char-width" type="text" id="text-input-email-example" aria-describedBy="" aria-invalid="false">
</div>

<div class="ontario-form-group">
    <label class="ontario-label" for="text-input-pin-number-example">
        Créez votre NIP<span class="ontario-label__flag">(obligatoire)</span>
    </label>
    <p id="text-input-pin-number-example-hint" class="ontario-hint">Entrez de 6&nbsp;à 12&nbsp;chiffres</p>
    <div id="text-input-pin-number-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
        <span class="ontario-error-messaging__icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </span>
        <span id="text-input-pin-number-example-error-text" class="ontario-error-messaging__content">
            Le NIP doit comporter au moins 6 caractères.
        </span>
    </div>
    <input required class="ontario-input  ontario-input--10-char-width" type="text" id="text-input-pin-number-example" aria-describedBy="text-input-pin-number-example-hint" aria-invalid="false">
</div>

<div class="ontario-form-group">
    <label class="ontario-label" for="text-area-example">
        Description de poste<span class="ontario-label__flag">(obligatoire)</span>
    </label>
    <div id="text-area-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
        <span class="ontario-error-messaging__icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </span>
        <span id="text-area-example-error-text" class="ontario-error-messaging__content">
            Vous devez saisir une description de poste.
        </span>
    </div>
    <textarea class="ontario-input ontario-textarea" name="text-area-example" id="text-area-example" aria-describedBy="" aria-invalid="false"></textarea>
</div>

<div class="ontario-form-group">
    <fieldset class="ontario-fieldset" role="group">
        <legend class="ontario-fieldset__legend ontario-margin-bottom-8-!">
            Date de naissance<span class="ontario-label__flag">(obligatoire)</span>
        </legend>
        <p id="date-input-birthdate-example-hint" class="ontario-hint">Par exemple&nbsp;: 1990 3 15</p>
        <div id="date-input-birthdate-example-error-container" class="ontario-error-messaging ontario-error__hidden" role="alert">
            <span class="ontario-error-messaging__icon">
                <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                    <use href="#ontario-icon-alert-error"></use>
                </svg>
            </span>
            <span class="ontario-error-messaging__content" id="date-input-birthdate-example-error-text">
                Saisissez une date valide.
            </span>
        </div>
        <div class="ontario-date__group ">
            <div class="ontario-date__group-input">
                <label for="date-input-birthdate-example-year">Année<span class="ontario-show-for-sr">Année</span></label>
                <input required class="ontario-input ontario-input--4-char-width" id="date-input-birthdate-example-year" type="text" inputmode="numeric" aria-describedBy="date-input-birthdate-example-hint" aria-invalid="false">
            </div>
            <div class="ontario-date__group-input">
                <label for="date-input-birthdate-example-month">Mois<span class="ontario-show-for-sr">Mois</span></label>
                <input required class="ontario-input ontario-input--2-char-width" id="date-input-birthdate-example-month" type="text" inputmode="numeric" aria-describedBy="date-input-birthdate-example-hint" aria-invalid="false">
            </div>
            <div class="ontario-date__group-input">
                <label for="date-input-birthdate-example-day">Jour<span class="ontario-show-for-sr">Jour</span></label>
                <input required class="ontario-input ontario-input--2-char-width" id="date-input-birthdate-example-day" type="text" inputmode="numeric" aria-describedBy="date-input-birthdate-example-hint" aria-invalid="false">
            </div>
        </div>
    </fieldset>
</div>

<script>
    window.lang = 'fr'
</script>
<script src="../../scripts/ontario-live-validation.js"></script>

Contenu:


                                @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;

.ontario-error-messaging__content {
	margin-left: spacing.$spacing-2;
	max-width: globalVariables.$standard-width;
}

.ontario-input__error {
	border-color: colours.$ontario-colour-dark-red !important; // overrides default border color on .ontario-input class
}

.ontario-checkboxes__single-option .ontario-checkboxes__error {
	.ontario-checkboxes__label:before {
		border-color: colours.$ontario-colour-dark-red;
	}
}

.ontario-error__hidden {
	display: none !important; // hides the error container
}

URL: /components/raw/live-validation/live-validation.scss
Chemin du système de fichiers: fractal/components/patterns/live-validation/live-validation.scss
Taille: 892 Bytes

Contenu:


                                .ontario-error-messaging__content{margin-left:.5rem;max-width:48rem}.ontario-input__error{border-color:#d81a21 !important}.ontario-checkboxes__single-option .ontario-checkboxes__error .ontario-checkboxes__label:before{border-color:#d81a21}.ontario-error__hidden{display:none !important}

URL: /components/raw/live-validation/live-validation.css
Chemin du système de fichiers: fractal/components/patterns/live-validation/live-validation.css
Taille: 286 Bytes

Principe directeur: Faire en sorte que l’utilisateur réussisse du premier coup.

À propos de cette modèle

La validation en direct a lieu lorsque la cible de saisie de l’utilisateur quitte un élément du formulaire Web et qu’il n’a pas encore soumis le formulaire.

Vous pouvez utiliser la validation en direct pour :

les champs de génération de nom d’utilisateur ou de mot de passe;
les champs au format strict (p. ex., codes postaux, numéros de permis de conduire, numéros de carte de crédit);
les champs compliqués avec lesquels les utilisateurs ont du mal (sur la base de tests);

Quand utiliser cette modèle

Commencez par appliquer notre directive normalisée sur les messages d’erreur et envisagez de la renforcer au moyen d’une validation en direct.

La validation en direct nécessite une logique avancée, c’est pourquoi vous ne devez l’utiliser que si vos recherches montrent qu’elle résout plus de problèmes pour les utilisateurs qu’elle n’en cause.

Avant d’utiliser la validation en direct, envisagez d’abord ces approches :

simplifiez les formulaires complexes en une « chose » par page (en anglais seulement);
utilisez la validation côté serveur et la validation avant soumission;
effectuez des tests avec les utilisateurs pour déterminer si la validation en direct améliore le temps d’exécution et la satisfaction.

Lignes directrices générales

Validez vos champs après que l’utilisateur a saisi des données et déplace la cible de saisie vers le champ suivant (sur flou). Évitez de valider prématurément les champs si l’utilisateur se contente de tabuler ou de cliquer sans saisir de données.
Si des données saisies par un utilisateur déclenchent vos critères d’erreur définis, indiquez qu’une erreur s’est produite en fournissant un message d’erreur en ligne au-dessus du champ et en mettant à jour le champ à son état d’erreur rouge.
Lorsque l’utilisateur revient pour corriger les données qu’il a saisies, revalidez le champ une fois que l’utilisateur a rempli le champ et déplace la cible de saisie hors du champ (sur flou) :
- conservez le message d’erreur si la même erreur se produit toujours;
- mettez à jour le message d’erreur si une erreur différente s’est produite;
- supprimez l’erreur en ligne et restaurez les champs de saisie à leur état par défaut lorsque le critère d’erreur est rempli.

Il s’agit de lignes directrices générales et celles-ci sont susceptibles de ne pas fonctionner pour tous les éléments de formulaire.

Pratiques exemplaires

À faire :

Faire correspondre vos messages d’erreur de validation en direct à vos messages d’erreur côté serveur.
Supprimer les messages d’erreur pour les champs corrects (il n’est pas nécessaire d’afficher une validation positive).
Combiner plusieurs critères d’erreur en une seule phrase (p. ex., « Le NIP ne doit comprendre que des chiffres et doit comporter au moins 6 caractères »).
Utiliser la validation côté serveur une fois que l’utilisateur a soumis le formulaire.

À ne pas faire :

Ajouter un sommaire des erreurs lors de l’utilisation de la validation en direct.
Effectuer une validation lorsque l’utilisateur navigue dans des champs vides (clics ou tabulations) avant de saisir des données.
Utiliser la validation en direct sur les éléments de formulaire qui ne nécessitent pas de saisie de texte par l’utilisateur (tels que les boutons radio, les listes déroulantes et les cases à cocher).
Utiliser la validation en direct sur la frappe, car cela peut entraîner des comportements indésirables avec les dispositifs d’assistance.

Champs facultatifs

Évitez d’inclure des champs facultatifs dans la conception de votre formulaire. Ne demandez aux utilisateurs que les renseignements nécessaires pour fournir un service.

Si vous devez inclure un champ facultatif et qu’il a un format strict (comme le code postal, le numéro de téléphone, etc.), veillez à :

fournir une validation en direct lorsque le champ a été rempli par l’utilisateur;
permettre qu’il soit soumis vide.

Validation sur certains éléments seulement

Utilisez des sections (ou pages) clairement définissables sur les formulaires où vous utilisez la validation en direct sur certains éléments de formulaire, mais pas tous.

Cela permet d’éviter la confusion de certains éléments de formulaire n’affichant aucune validation en direct.

Accessibilité

Assurez-vous que la cible de saisie du clavier n’est pas bloquée. L’utilisateur doit pouvoir naviguer hors de l’élément à l’aide de son clavier.
Lorsque des données sont non valides, appliquez-leur l’attribut aria-invalid. Supprimez l’attribut une fois que les données sont valides.
Associez par programmation le message d’erreur au champ du formulaire pour les utilisateurs de technologie d’assistance et mettez-le à jour à l’aide de la propriété aria-live.
- L’utilisation de la valeur « assertive » met l’accent sur l’importance du message et oblige les lecteurs d’écran à interrompre leurs tâches en cours pour lire ce message à haute voix.
- Le message est ensuite lu à haute voix avant que l’élément suivant ne soit annoncé à l’utilisateur.

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.