Validation de formulaires

But

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

Exemple

Coordonnées

Titre (obligatoire)

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>

Prénom (obligatoire)

Voir le code


<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="fname" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="fname" name="fname" type="text" autocomplete="given-name" required="required" pattern=".{2,}" data-rule-minlength="2" />
		</div>

Nom de famille (obligatoire)

Voir le code


<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<div class="form-group">
			<label for="lname" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
			<input class="form-control" id="lname" name="lname" type="text" autocomplete="family-name" required="required" pattern=".{2,}" data-rule-minlength="2" />
		</div>

Numéro de téléphone (obligatoire)

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>

Code postal (Canada) (obligatoire)

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>

Adresse électronique (votrenom@domaine.com)

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>

URL du site Web (https://www.url.com)

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>

Fichier (obligatoire)

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

Date (AAAA-MM-JJ)

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"> (AAAA-MM-JJ)</span></label>
			<input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" />
		</div>

Heure (hh:mm)

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>

Nombre (entre -1 et 1, par pas de 0,1)

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>

Alphanumérique (4 caractères minimum)

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" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" data-rule-minlength="4" />
		</div>

Numérique (chiffres seulement)

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>

Lettres seulement (5 caractères maximum)

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" pattern="[A-Za-z\s]" data-rule-lettersonly="true" />
		</div>

Lettres et des signes de ponctuation seulement (ponctuation qui est permise : [. , ( ) "])

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" pattern="[A-Za-z-.,()'"\s]" data-rule-letterswithbasicpunc="true" />
		</div>

Maximum of 10 words

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>

Minimum de 2 mots

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>

Entre 2 et 10 mots

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>

Sans d'espaces blancs

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" pattern="[A-Za-z-.,()'"\s]" data-rule-nowhitespace="true" />
		</div>

Mot de passe (entre 5 et 10 caractères) Confirmez votre mot de passe

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" pattern=".{5,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>

Animaux favoris (obligatoire)

Chien

Chat

Poisson

Autre

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">Animaux favoris</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="checkbox">
				<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />&#160;&#160;Chien</label>
			</div>
			<div class="checkbox">
				<label for="animal2"><input type="checkbox" name="animal" value="2" id="animal2" />&#160;&#160;Chat</label>
			</div>
			<div class="checkbox">
				<label for="animal3"><input type="checkbox" name="animal" value="3" id="animal3" />&#160;&#160;Poisson</label>
			</div>
			<div class="checkbox">
				<label for="animal4"><input type="checkbox" name="animal" value="4" id="animal4" />&#160;&#160;Autre</label>
			</div>
		</fieldset>

Statut de citoyen (obligatoire)

Citoyen canadien

Résident permanent

Permis de travail

Autre

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">Statut de citoyen</span> <strong class="required">(obligatoire)</strong></legend>
			<div class="radio">
				<label for="status1" class="required"><input type="radio" name="status" value="1" id="status1" required="required" />  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>

Cases à cocher empilées dans un modèle d'éléments <li> comportant des étiquettes implicites (obligatoire)

Pomme
Orange
Kiwi
Autre

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="fruits1a"><input type="checkbox" name="example1" value="1" id="fruits1a" required="required" />Pomme</label>
				</li>
				<li class="checkbox">
					<label for="fruits2a"><input type="checkbox" name="example1" value="2" id="fruits2a" />Orange</label>
				</li>
				<li class="checkbox">
					<label for="fruits3a"><input type="checkbox" name="example1" value="3" id="fruits3a" />Kiwi</label>
				</li>
				<li class="checkbox">
					<label for="fruits4a"><input type="checkbox" name="example1" value="4" id="fruits4a" />Autre</label>
				</li>
			</ul>
		</fieldset>

Remarque : L'attribut for dans les étiquettes est facultatif pour ce modèle

Boutons radio empilés dans un modèle d'éléments <li> comportant des étiquettes implicites (obligatoire)

Pomme
Orange
Kiwi
Autre

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 empilés 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="fruits1b"><input type="radio" name="example2" value="1" id="fruits1b" required="required" />Pomme</label>
				</li>
				<li class="radio">
					<label for="fruits2b"><input type="radio" name="example2" value="2" id="fruits2b" />Orange</label>
				</li>
				<li class="radio">
					<label for="fruits3b"><input type="radio" name="example2" value="3" id="fruits3b" />Kiwi</label>
				</li>
				<li class="radio">
					<label for="fruits4b"><input type="radio" name="example2" value="4" id="fruits4b" />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)

Pomme

Orange

Kiwi

Autre

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="fruits1c">
					<input type="checkbox" name="example3" value="1" id="fruits1c" required="required" />Pomme
				</label>
			</div>
			<div class="checkbox">
				<label for="fruits2c">
					<input type="checkbox" name="example3" value="2" id="fruits2c" />Orange
				</label>
			</div>
			<div class="checkbox">
				<label for="fruits3c">
					<input type="checkbox" name="example3" value="3" id="fruits3c" />Kiwi
				</label>
			</div>
			<div class="checkbox">
				<label for="fruits4c">
					<input type="checkbox" name="example3" value="4" id="fruits4c" />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)

Pomme
Orange
Kiwi
Autre

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="example4" value="1" id="fruits5" required="required" />
					<label for="fruits5">Pomme</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="2" id="fruits6" />
					<label for="fruits6">Orange</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="3" id="fruits7" />
					<label for="fruits7">Kiwi</label>
				</li>
				<li class="label-inline">
					<input type="checkbox" name="example4" value="4" id="fruits8" />
					<label for="fruits8">Autre</label>
				</li>
			</ul>
		</fieldset>

Boutons radio horizontaux dans un modèle d'éléments <label> comportant des étiquettes implicites (obligatoire) Téléphone intelligent Ordinateur portatif Système d’assistance vocale Réacteur à fusion

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="tech1" class="radio-inline">
				<input type="radio" name="example5" value="1" id="tech1" required="required" />Téléphone intelligent
			</label>
			<label for="tech2" class="radio-inline">
				<input type="radio" name="example5" value="2" id="tech2" />Ordinateur portatif
			</label>
			<label for="tech3" class="radio-inline">
				<input type="radio" name="example5" value="3" id="tech3" />Système d’assistance vocale
			</label>
			<label for="tech4" class="radio-inline">
				<input type="radio" name="example5" value="4" id="tech4" />Réacteur à fusion
			</label>
		</fieldset>

Cases à cocher horizontales dans un modèle d’éléments <div> comportant des étiquettes explicites (obligatoire)

Téléphone intelligent

Ordinateur portatif

Système d’assistance vocale

Réacteur à fusion

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="example6" value="1" id="tech5" required="required" />
				<label for="tech5">Téléphone intelligent</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="2" id="tech6" />
				<label for="tech6">Ordinateur portatif</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="3" id="tech7" />
				<label for="tech7">Système d’assistance vocale</label>
			</div>
			<div class="label-inline">
				<input type="checkbox" name="example6" value="4" id="tech8" />
				<label for="tech8">Réacteur à fusion</label>
			</div>
		</fieldset>

Date de modification :: 2020-02-04

Sélection de la langue

Recherche et menus

Recherche

Validation de formulaires

But

Exemple