Gouvernement du Canada / Government of Canada

Recherche

Validation de formulaires

But

Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.

Exemples utilisant la validation régulière ou spécialisée

Coordonnées
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="title1" class="required"><span class="field-name">Titre</span> <strong class="required">(obligatoire)</strong></label>
			<select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required">
				<option label="Sélectionner un titre"></option>
				<option value="dr">D. Ph.</option>
				<option value="esq">Me</option>
				<option value="mr">M.</option>
				<option value="ms">Madame</option>
			</select>
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="fname1" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="lname1" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" data-rule-minlength="2" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="tel1" class="required"><span class="field-name">Numéro de téléphone (avec l'indicatif régional)</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="pcodeca1" class="required"><span class="field-name">Code postal</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" required="required" data-rule-postalCodeCA="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="email1"><span class="field-name">Adresse électronique</span> (votrenom@domaine.com)</label>
			<input class="form-control" id="email1" name="email1" type="email" autocomplete="email" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="url1"><span class="field-name">URL du site Web (https://www.url.com)</span></label>
			<input class="form-control" id="url1" name="url1" type="url" autocomplete="url" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="file1" class="required"><span class="field-name">Fichier</span> <strong class="required">(obligatoire)</strong></label>
			<input id="file1" name="file1" type="file" required="required" />
		</div>
Autres exemples
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span></label>
			<input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="time1"><span class="field-name">Heure</span> (hh:mm)</label>
			<input class="form-control" id="time1" name="time1" type="time" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
	...
	<div class="form-group">
		<label for="number1"><span class="field-name">Nombre</span> (entre -1 et 1, par pas de 0,1)</label>
		<input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1"/>
	</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="an1"><span class="field-name">Alphanumérique</span> (4 caractères minimum)</label>
			<input class="form-control" id="an1" name="an1" type="text" data-rule-alphanumeric="true" data-rule-minlength="4" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="numeric1"><span class="field-name">Numérique</span> (chiffres seulement)</label>
			<input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="letters1"><span class="field-name">Lettres seulement</span> (5 caractères maximum)</label>
			<input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" data-rule-lettersonly="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="text1"><span class="field-name">Lettres et des signes de ponctuation seulement</span> (ponctuation qui est permise : [. , ( ) "])</label>
			<input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word1"><span class="field-name">Maximum de 10 mots</span></label>
			<input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word2"><span class="field-name">Minimum de 2 mots</span></label>
			<input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="word3"><span class="field-name">Entre 2 et 10 mots</span></label>
			<input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="nowhitespace1"><span class="field-name">Sans d'espaces blancs</span></label>
			<input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="password1"><span class="field-name">Mot de passe</span> (entre 5 et 10 caractères)</label>
			<input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-rangelength="[5,10]" />
			<label for="passwordconfirm"><span class="field-name">Confirmez votre mot de passe</span></label>
			<input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1" />
		</div>
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
			<div class="form-group">
				<div class="checkbox checkbox-standalone required">
					<label for="agree1"><input id="agree1" name="agree1" type="checkbox" required> <span class="field-name">Je suis d’accord</span> <strong class="required">(obligatoire)</strong></label>
				</div>
			</div>
Animaux favoris (obligatoire)
Voir le code

Il est recommandé d'utiliser data-rule-required="true" au lieu de required="required" puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Animaux favoris</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="checkbox">
				<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true" /> Chien</label>
			</div>
			<div class="checkbox">
				<label for="animal2"><input type="checkbox" name="animal" value="2" id="animal2" /> Chat</label>
			</div>
			<div class="checkbox">
				<label for="animal3"><input type="checkbox" name="animal" value="3" id="animal3" /> Poisson</label>
			</div>
			<div class="checkbox">
				<label for="animal4"><input type="checkbox" name="animal" value="4" id="animal4" /> Autre</label>
			</div>
		</fieldset>
Statut de citoyen (obligatoire)
Voir le code

Il est recommandé d'utiliser data-rule-required="true" au lieu de required="required" puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.

<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Statut de citoyen</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="radio">
				<label for="status1"><input type="radio" name="status" value="1" id="status1" data-rule-required="true" /> Citoyen canadien</label>
			</div>
			<div class="radio">
				<label for="status2"><input type="radio" name="status" value="2" id="status2" /> Résident permanent</label>
			</div>
			<div class="radio">
				<label for="status3"><input type="radio" name="status" value="3" id="status3" /> Permis de travail</label>
			</div>
			<div class="radio">
				<label for="status4"><input type="radio" name="status" value="4" id="status4" /> Autre</label>
			</div>
		</fieldset>

Exemple utilisant un modèle de validation personnalisé

Si l'attribut pattern est utilisé de paire avec l'attribut data-msg, la validation du motif prévaudra; ce qui signifie qu'au final vous n'obtiendrez seulement que le message d'erreur générique qui provient du pattern. Il est fortement recommandé d'utiliser l'attribut data-msg pour personnaliser le message d'erreur affiché par la validation du motif lorsque le champ est en état d'erreur.

Voir le code 
<div class="wb-frmvld">
				<form action="#" method="get" id="validation-example">
					...
					<div class="form-group">
						<label for="custom1" class="required"><span class="field-name">Numéro d'application (une lettre suivi de six chiffres)</span> <strong class="required">(obligatoire)</strong></label>
						<input class="form-control" id="custom1" name="custom1" type="text" pattern="[A-Za-z][0-9]{6}" required="required" />
					</div>

Exemples variés de formulaires verticaux et horizontaux

Cases à cocher empilées dans un modèle d'éléments <li> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Cases à cocher empilées dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<ul class="form-group list-unstyled">
				<li class="checkbox">
					<label for="example1a"><input type="checkbox" name="example1" value="1" id="example1a" required="required" />Pomme</label>
				</li>
				<li class="checkbox">
					<label for="example1b"><input type="checkbox" name="example1" value="2" id="example1b" />Orange</label>
				</li>
				<li class="checkbox">
					<label for="example1c"><input type="checkbox" name="example1" value="3" id="example1c" />Kiwi</label>
				</li>
				<li class="checkbox">
					<label for="example1d"><input type="checkbox" name="example1" value="4" id="example1d" />Autre</label>
				</li>
			</ul>
		</fieldset>
Remarque : L'attribut for dans les étiquettes est facultatif pour ce modèle
Boutons radio verticaux dans un modèle d'éléments <li> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Boutons radio verticaux dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<ul class="form-group list-unstyled">
				<li class="radio">
					<label for="example2a"><input type="radio" name="example2" value="1" id="example2a" required="required" />Pomme</label>
				</li>
				<li class="radio">
					<label for="example2b"><input type="radio" name="example2" value="2" id="example2b" />Orange</label>
				</li>
				<li class="radio">
					<label for="example2c"><input type="radio" name="example2" value="3" id="example2c" />Kiwi</label>
				</li>
				<li class="radio">
					<label for="example2d"><input type="radio" name="example2" value="4" id="example2d" />Autre</label>
				</li>
			</ul>
		</fieldset>
Remarque : L'attribut for dans les étiquettes est facultatif pour ce modèle
Cases à cocher empilées dans un modèle d’éléments <div> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Cases à cocher empilées dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="checkbox">
				<label for="example3a"><input type="checkbox" name="example3" value="1" id="example3a" required="required" />Pomme</label>
			</div>
			<div class="checkbox">
				<label for="example3b"><input type="checkbox" name="example3" value="2" id="example3b" />Orange</label>
			</div>
			<div class="checkbox">
				<label for="example3c"><input type="checkbox" name="example3" value="3" id="example3c" />Kiwi</label>
			</div>
			<div class="checkbox">
				<label for="example3d"><input type="checkbox" name="example3" value="4" id="example3d" />Autre</label>
			</div>
		</fieldset>
Remarque : L'attribut for dans les étiquettes est facultatif pour ce modèle
Boutons radios empilés dans un modèle d’éléments <div> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Boutons radios empilés dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="radio">
				<label for="example4a"><input type="radio" name="example4" value="1" id="example4a" required="required" />Pomme</label>
			</div>
			<div class="radio">
				<label for="example4b"><input type="radio" name="example4" value="2" id="example4b" />Orange</label>
			</div>
			<div class="radio">
				<label for="example4c"><input type="radio" name="example4" value="3" id="example4c" />Kiwi</label>
			</div>
			<div class="radio">
				<label for="example4d"><input type="radio" name="example4" value="4" id="example4d" />Autre</label>
			</div>
		</fieldset>
Remarque : L'attribut for dans les étiquettes est facultatif pour ce modèle
Cases à cocher horizontales dans un modèle d'éléments <li> comportant des étiquettes explicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
			<ul class="form-inline list-unstyled">
				<li class="label-inline">
					<input type="checkbox" name="example5" value="1" id="example5a" required="required" />
					<label for="example5a">Pomme</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example5" value="2" id="example5b" />
					<label for="example5b">Orange</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example5" value="3" id="example5c" />
					<label for="example5c">Kiwi</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example5" value="4" id="example5d" />
					<label for="example5d">Autre</label>
				</li>
			</ul>
		</fieldset>
Boutons radios horizontaux dans un modèle d'éléments <li> comportant des étiquettes explicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="chkbxrdio-grp">
			<legend class="required"><span class="field-name">Boutons radios horizontaux dans un modèle d'éléments <code>&lt;li&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
			<ul class="form-inline list-unstyled">
				<li class="label-inline">
					<input type="radio" name="example6" value="1" id="example6a" required="required" />
					<label for="example6a">Pomme</label>
				</li>
				<li class="label-inline">
					<input type="radio" name="example6" value="2" id="example6b" />
					<label for="example6b">Orange</label>
				</li>
				<li class="label-inline">
					<input type="radio" name="example6" value="3" id="example6c" />
					<label for="example6c">Kiwi</label>
				</li>
				<li class="label-inline">
					<input type="radio" name="example6" value="4" id="example6d" />
					<label for="example6d">Autre</label>
				</li>
			</ul>
		</fieldset>
Cases à cocher horizontales dans un modèle d'éléments <label> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d'éléments <code>&lt;label&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<label for="example7a" class="checkbox-inline"><input type="checkbox" name="example7" value="1" id="example7a" required="required" />Téléphone intelligent</label>
			<label for="example7b" class="checkbox-inline"><input type="checkbox" name="example7" value="2" id="example7b" />Ordinateur portatif</label>
			<label for="example7c" class="checkbox-inline"><input type="checkbox" name="example7" value="3" id="example7c" />Système d’assistance vocale</label>
			<label for="example7d" class="checkbox-inline"><input type="checkbox" name="example7" value="4" id="example7d" />Réacteur à fusion</label>
		</fieldset>
Boutons radio horizontaux dans un modèle d'éléments <label> comportant des étiquettes implicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Boutons radio horizontaux dans un modèle d'éléments <code>&lt;label&gt;</code> comportant des étiquettes implicites</span> <strong class="required">(obligatoire)</strong></legend>
			<label for="example8a" class="radio-inline"><input type="radio" name="example8" value="1" id="example8a" required="required" />Téléphone intelligent</label>
			<label for="example8b" class="radio-inline"><input type="radio" name="example8" value="2" id="example8b" />Ordinateur portatif</label>
			<label for="example8c" class="radio-inline"><input type="radio" name="example8" value="3" id="example8c" />Système d’assistance vocale</label>
			<label for="example8d" class="radio-inline"><input type="radio" name="example8" value="4" id="example8d" />Réacteur à fusion</label>
		</fieldset>
Cases à cocher horizontales dans un modèle d’éléments <div> comportant des étiquettes explicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Cases à cocher horizontales dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="label-inline">
				<input type="checkbox" name="example9" value="1" id="example9a" required="required" />
				<label for="example9a">Téléphone intelligent</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example9" value="2" id="example9b" />
				<label for="example9b">Ordinateur portatif</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example9" value="3" id="example9c" />
				<label for="example9c">Système d’assistance vocale</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example9" value="4" id="example9d" />
				<label for="example9d">Réacteur à fusion</label>
			</div>
		</fieldset>
Boutons radios horizontaux dans un modèle d’éléments <div> comportant des étiquettes explicites (obligatoire)
Voir le code 
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset class="form-inline chkbxrdio-grp">
			<legend class="required"><span class="field-name">Boutons radios horizontaux dans un modèle d’éléments <code>&lt;div&gt;</code> comportant des étiquettes explicites</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="label-inline">
				<input type="radio" name="example10" value="1" id="example10a" required="required" />
				<label for="example10a">Téléphone intelligent</label>
			</div>
			<div class="label-inline">
				<input type="radio" name="example10" value="2" id="example10b" />
				<label for="example10b">Ordinateur portatif</label>
			</div>
			<div class="label-inline">
				<input type="radio" name="example10" value="3" id="example10c" />
				<label for="example10c">Système d’assistance vocale</label>
			</div>
			<div class="label-inline">
				<input type="radio" name="example10" value="4" id="example10d" />
				<label for="example10d">Réacteur à fusion</label>
			</div>
		</fieldset>

Cas d'essai particulier

Les exemples suivants sont uniquement à des fins de mise à l'essai de certaines configurations de cas particuliers afin de vérifier que le plugiciel continue de fonctionner comme prévu.

<div> entre le formulaire et le plugin de validation de formulaire

Lorsqu'il y a une balise <div> enveloppant l'élément <form> entre le formulaire et le plugin de validation.

Code source

<div class="wb-frmvld">
	<div id="app-root">
		<form action="#" method="get" id="edge-test-1">
			...
		</form>
	</div>
</div>

Détails de la page

Date de modification :