Valider les composants de formulaire
Validation et messages d’erreur intégrés
Activer la validation par défaut
- Utilisez l’attribut
requiredsur les composants de formulaire pour activer la validation des champs obligatoires. - Désactivez la validation du navigateur en ajoutant
novalidateà la balise de formulaire.
Fonctionnement de la validation
Propriétés de validation
validator et validate-on. validator | validate-on |
| -------- | ------- |
| Détermine ce qui doit être validé. | Détermine quand l’action de validation aura lieu. |
| Le composant de formulaire validera un ensemble de fonctions selon l’ordre dans lequel elles apparaissent. | blur: La vérification se produit dès qu’une personne clique en dehors du champ ou le quitte par tabulation.submit: La vérification se produit lorsque le formulaire est soumis.other: La vérification se fait lors d’un autre événement défini par le développeur ou la développeuse à l’aide de la méthodevalidate()sur chaque composant.
Javascript
const gcdsComponent = document.querySelector('gcds-input');
gcdsComponent.validator = [customValidation()];React
<GcdsInput
validator={[customValidation()]}
/>Blur
<gcds-input
name="blur-validate"
label="Validate on blur"
required
validate-on="blur"
></gcds-input>Submit
<gcds-input
name="submit-validate"
label="Validate on submit"
required
validate-on="submit"
></gcds-input>Other
<gcds-input
name="other-validate"
label="Validate on other"
required
validate-on="other"
></gcds-input>Événements de validation
gcdsError ou gcdsValid. gcdsError | gcdsValid |
| -------- | ------- |
| Les données n’ont pas passé les contrôles de validation. | Les données ont passé les contrôles de validation. |
| L’événement contiendra un detail avec le message d’erreur associé. Ce message d’erreur s’affichera sur le composant. | Aucun message d’erreur ne s’affichera. | Objets de validation
validate qui peut être appelée par le composant de formulaire. validate génère un objet avec plusieurs propriétés que le composant peut lire : - La propriété
validcontient une valeur booléenne indiquant si la valeur soumise par le composant de formulaire satisfait aux critères de validation. - La propriété
reasoncontient un objet avec les propriétésenetfr, qui contiennent le texte du message d’erreur dans chaque langue. - La propriété
errorsest une propriété facultative conçue pour les composants de formulaire plus complexes comportant plusieurs éléments. Elle contient un objet avec des propriétés booléennes indiquant au composant de formulaire quel élément est invalide. La nécessité de cette propriété dans un validateur sera définie lors de la création de chaque composant de formulaire.
// Required field validator used in gcds-input
const requiredField: Validator<string> = {
validate: (value: string) => {
return {
valid: value != null && value.trim() != '',
reason: {
en: 'Enter information to continue.',
fr: 'Saisissez des renseignements pour continuer.',
},
};
},
};Retour de validator
interface ValidatorReturn {
valid: boolean;
reason: {
en: string;
fr: string;
};
errors?: object;
}Retour de validator avec errors
date-input {
valid: boolean;
reason: {
en: string;
fr: string;
};
errors: {
year: boolean;
month: boolean;
day: boolean;
}
}Personnaliser la validation et les messages d’erreur
- Ajoutez une validation personnalisée à l’aide de la propriété
validator. - Modifiez l’événement de validation à l’aide de la propriété
validate-on.
<gcds-input
input-id="form-name"
label="Nom de la bibliothèque de composants"
name="library-name"
required
></gcds-input>
<script>
const input = document.querySelector('gcds-input[name="library-name"]');
const libraryName = () => {
return {
validate: value => {
return {
valid: value === '@gcds-core/components',
reason: {
en: `The entered value must be '@gcds-core/components'.`,
fr: `La valeur saisie doit être « @gcds-core/components ».`,
},
};
},
};
};
input.validator = [libraryName()];
</script>Format de la propriété validator pour différents composants
Format de la propriété validator pour gcds-checkboxes :
const validator = () => {
return {
validate: value: string[] => {
return {
valid: boolean,
reason: {
en: string,
fr: string,
},
};
},
};
};
</script>Format de la propriété validator pour gcds-date-input :
const validator = () => {
return {
validate: value: string => {
return {
valid: boolean,
reason: {
en: string,
fr: string,
},
errors: {
year: boolean,
month: boolean,
day: boolean,
},
};
},
};
};
</script>Format de la propriété validator pour gcds-file-uploader :
const validator = () => {
return {
validate: value: FileList => {
return {
valid: boolean,
reason: {
en: string,
fr: string,
},
};
},
};
};
</script>Les propriétés validator pour les composants gcds-input, gcds-select, gcds-textarea, gcds-radios suivent le même modèle.
Format de leur propriété validator respectif :
const validator = () => {
return {
validate: value: string => {
return {
valid: boolean,
reason: {
en: string,
fr: string,
},
};
},
};
};
</script>