---
{
	"title": "Validation de formulaires",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.",
	"tag": "formvalid",
	"parentdir": "formvalid",
	"altLangPrefix": "formvalid",
	"dateModified": "2023-12-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<ul>
	<li><a href="formvalid-fr.html">Validation de formulaires</a></li>
	<li><a href="formvalid-server-fr.html">Fusion des erreurs Serveur-Client</a></li>
</ul>

<hr />

<section>
	<h2>But</h2>
	<p>Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.</p>
</section>

<section>
	<h2>Exemples utilisant la validation régulière ou spécialisée</h2>

	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example">
			<fieldset>
				<legend>Coordonnées</legend>
				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="title1" class="required"&gt;&lt;span class="field-name"&gt;Titre&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;select class="form-control" id="title1" name="title1" autocomplete="honorific-prefix" required="required"&gt;
				&lt;option label="Sélectionner un titre"&gt;&lt;/option&gt;
				&lt;option value="dr"&gt;D. Ph.&lt;/option&gt;
				&lt;option value="esq"&gt;Me&lt;/option&gt;
				&lt;option value="mr"&gt;M.&lt;/option&gt;
				&lt;option value="ms"&gt;Madame&lt;/option&gt;
			&lt;/select&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="fname1" class="required"&gt;&lt;span class="field-name"&gt;Prénom&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="fname1" name="fname1" type="text" autocomplete="given-name" required="required" data-rule-minlength="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="lname1" class="required"&gt;&lt;span class="field-name"&gt;Nom de famille&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="lname1" name="lname1" type="text" autocomplete="family-name" required="required" data-rule-minlength="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="tel1" class="required"&gt;&lt;span class="field-name"&gt;Numéro de téléphone (avec l'indicatif régional)&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="tel1" name="tel1" type="tel" autocomplete="tel" required="required" data-rule-phoneUS="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="pcodeca1" class="required"><span class="field-name">Code postal (Canada)</span> <strong class="required">(obligatoire)</strong></label>
					<input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true" />
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="pcodeca1" class="required"&gt;&lt;span class="field-name"&gt;Code postal&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input class="form-control" id="pcodeca1" name="pcodeca1" type="text" autocomplete="postal-code" required="required" data-rule-postalCodeCA="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="email1"&gt;&lt;span class="field-name"&gt;Adresse électronique&lt;/span&gt; (votrenom@domaine.com)&lt;/label&gt;
			&lt;input class="form-control" id="email1" name="email1" type="email" autocomplete="email" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="url1"&gt;&lt;span class="field-name"&gt;URL du site Web (https://www.url.com)&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="url1" name="url1" type="url" autocomplete="url" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					{{>alertariahidden}}
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="file1" class="required"&gt;&lt;span class="field-name"&gt;Fichier&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
			&lt;input id="file1" name="file1" type="file" required="required" /&gt;
		&lt;/div&gt;</code></pre>
				</details>
			</fieldset>

			<fieldset>
				<legend>Autres exemples</legend>
				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="date1"&gt;&lt;span class="field-name"&gt;Date&lt;/span&gt;&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="date1" name="date1" type="date" data-rule-dateISO="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="time1"&gt;&lt;span class="field-name"&gt;Heure&lt;/span&gt; (hh:mm)&lt;/label&gt;
			&lt;input class="form-control" id="time1" name="time1" type="time" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
	...
	&lt;div class="form-group"&gt;
		&lt;label for="number1"&gt;&lt;span class="field-name"&gt;Nombre&lt;/span&gt; (entre -1 et 1, par pas de 0,1)&lt;/label&gt;
		&lt;input class="form-control" id="number1" name="number1" type="number" min="-1" max="1" step="0.1"/&gt;
	&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="an1"&gt;&lt;span class="field-name"&gt;Alphanumérique&lt;/span&gt; (4 caractères minimum)&lt;/label&gt;
			&lt;input class="form-control" id="an1" name="an1" type="text" data-rule-alphanumeric="true" data-rule-minlength="4" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="numeric1"&gt;&lt;span class="field-name"&gt;Numérique&lt;/span&gt; (chiffres seulement)&lt;/label&gt;
			&lt;input class="form-control" id="numeric1" name="numeric1" type="number" data-rule-digits="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="letters1"&gt;&lt;span class="field-name"&gt;Lettres seulement&lt;/span&gt; (5 caractères maximum)&lt;/label&gt;
			&lt;input class="form-control" id="letters1" name="letters1" type="text" size="5" maxlength="5" data-rule-lettersonly="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<div class="form-group">
					<label for="text1"><span class="field-name">Lettres et des signes de ponctuation seulement</span> (ponctuation qui est permise&#160;: [. , ( ) "])</label>
					<input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true" />
				</div>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="text1"&gt;&lt;span class="field-name"&gt;Lettres et des signes de ponctuation seulement&lt;/span&gt; (ponctuation qui est permise&#160;: [. , ( ) "])&lt;/label&gt;
			&lt;input class="form-control" id="text1" name="text1" type="text" data-rule-letterswithbasicpunc="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word1"&gt;&lt;span class="field-name"&gt;Maximum de 10 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word2"&gt;&lt;span class="field-name"&gt;Minimum de 2 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="word3"&gt;&lt;span class="field-name"&gt;Entre 2 et 10 mots&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="nowhitespace1"&gt;&lt;span class="field-name"&gt;Sans d'espaces blancs&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true" /&gt;
		&lt;/div&gt;</code></pre>
				</details>

				<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>
				<details class="mrgn-bttm-md">
					<summary>Voir le code</summary>
					<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;div class="form-group"&gt;
			&lt;label for="password1"&gt;&lt;span class="field-name"&gt;Mot de passe&lt;/span&gt; (entre 5 et 10 caractères)&lt;/label&gt;
			&lt;input class="form-control" id="password1" name="password1" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-rangelength="[5,10]" /&gt;
			&lt;label for="passwordconfirm"&gt;&lt;span class="field-name"&gt;Confirmez votre mot de passe&lt;/span&gt;&lt;/label&gt;
			&lt;input class="form-control" id="passwordconfirm" name="passwordconfirm" type="password" autocomplete="new-password" maxlength="10" size="10" data-rule-equalTo="#password1" /&gt;
		&lt;/div&gt;</code></pre>
				</details>
			</fieldset>

			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
			&lt;div class="form-group"&gt;
				&lt;div class="checkbox checkbox-standalone required"&gt;
					&lt;label for="agree1"&gt;&lt;input id="agree1" name="agree1" type="checkbox" required&gt; &lt;span class="field-name"&gt;Je suis d’accord&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
				&lt;/div&gt;
			&lt;/div&gt;</code></pre>
			</details>

			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<div class="alert alert-info"><p>Il est recommandé d'utiliser <code>data-rule-required="true"</code> au lieu de <code>required="required"</code> puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.</p></div>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Animaux favoris&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal1"&gt;&lt;input type="checkbox" name="animal" value="1" id="animal1" data-rule-required="true" /&gt; Chien&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal2"&gt;&lt;input type="checkbox" name="animal" value="2" id="animal2" /&gt; Chat&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal3"&gt;&lt;input type="checkbox" name="animal" value="3" id="animal3" /&gt; Poisson&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="animal4"&gt;&lt;input type="checkbox" name="animal" value="4" id="animal4" /&gt; Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<div class="alert alert-info"><p>Il est recommandé d'utiliser <code>data-rule-required="true"</code> au lieu de <code>required="required"</code> puisque cela permet d'éviter que les lecteurs d'écran indiquent que la première option est obligatoire.</p></div>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Statut de citoyen&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status1"&gt;&lt;input type="radio" name="status" value="1" id="status1" data-rule-required="true" /&gt; Citoyen canadien&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status2"&gt;&lt;input type="radio" name="status" value="2" id="status2" /&gt; Résident permanent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status3"&gt;&lt;input type="radio" name="status" value="3" id="status3" /&gt; Permis de travail&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="status4"&gt;&lt;input type="radio" name="status" value="4" id="status4" /&gt; Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary" /> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md" />
		</form>
	</div>
</section>
<hr>
<section>
	<h2>Exemple utilisant un modèle de validation personnalisé</h2>
	<p>Si l'attribut <code>pattern</code> est utilisé de paire avec l'attribut <code>data-msg</code>, 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 <code>pattern</code>. Il est fortement recommandé d'utiliser l'attribut <code>data-msg</code> pour personnaliser le message d'erreur affiché par la validation du motif lorsque le champ est en état d'erreur.</p>
	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example-3">
			<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}" data-msg="Veuillez entrer un numéro d'application valide" required="required" />
			</div>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				{{>alertariahidden}}
				<pre><code>&lt;div class="wb-frmvld"&gt;
				&lt;form action="#" method="get" id="validation-example"&gt;
					...
					&lt;div class="form-group"&gt;
						&lt;label for="custom1" class="required"&gt;&lt;span class="field-name"&gt;Numéro d'application (une lettre suivi de six chiffres)&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/label&gt;
						&lt;input class="form-control" id="custom1" name="custom1" type="text" pattern="[A-Za-z][0-9]{6}" required="required" /&gt;
					&lt;/div&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary" /> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md" />
		</form>
	</div>
</section>
<hr>
<section>
<!-- checkbox in list item -->
	<h2>Exemples variés de formulaires verticaux et horizontaux</h2>
	<div class="wb-frmvld">
		<form action="#" method="get" id="validation-example-2">

			<!-- checkbox in list item with implicit labels-->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher empilées dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-group list-unstyled"&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1a"&gt;&lt;input type="checkbox" name="example1" value="1" id="example1a" required="required" /&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1b"&gt;&lt;input type="checkbox" name="example1" value="2" id="example1b" /&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1c"&gt;&lt;input type="checkbox" name="example1" value="3" id="example1c" /&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="checkbox"&gt;
					&lt;label for="example1d"&gt;&lt;input type="checkbox" name="example1" value="4" id="example1d" /&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- radio buttons in a list with implicit labels -->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radio verticaux dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-group list-unstyled"&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2a"&gt;&lt;input type="radio" name="example2" value="1" id="example2a" required="required" /&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2b"&gt;&lt;input type="radio" name="example2" value="2" id="example2b" /&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2c"&gt;&lt;input type="radio" name="example2" value="3" id="example2c" /&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="radio"&gt;
					&lt;label for="example2d"&gt;&lt;input type="radio" name="example2" value="4" id="example2d" /&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- checkbox in div pattern with implicit labels-->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher empilées dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3a"&gt;&lt;input type="checkbox" name="example3" value="1" id="example3a" required="required" /&gt;Pomme&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3b"&gt;&lt;input type="checkbox" name="example3" value="2" id="example3b" /&gt;Orange&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3c"&gt;&lt;input type="checkbox" name="example3" value="3" id="example3c" /&gt;Kiwi&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="checkbox"&gt;
				&lt;label for="example3d"&gt;&lt;input type="checkbox" name="example3" value="4" id="example3d" /&gt;Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- radio buttons in div pattern with implicit labels-->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios empilés dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4a"&gt;&lt;input type="radio" name="example4" value="1" id="example4a" required="required" /&gt;Pomme&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4b"&gt;&lt;input type="radio" name="example4" value="2" id="example4b" /&gt;Orange&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4c"&gt;&lt;input type="radio" name="example4" value="3" id="example4c" /&gt;Kiwi&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="radio"&gt;
				&lt;label for="example4d"&gt;&lt;input type="radio" name="example4" value="4" id="example4d" /&gt;Autre&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
				<div class="well well-sm"><strong>Remarque&nbsp;:</strong> L'attribut <code>for</code> dans les étiquettes est facultatif pour ce modèle</div>
			</details>

			<!-- checkbox in list item with explicit labels-->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-inline list-unstyled"&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="1" id="example5a" required="required" /&gt;
					&lt;label for="example5a"&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="2" id="example5b" /&gt;
					&lt;label for="example5b"&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="3" id="example5c" /&gt;
					&lt;label for="example5c"&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="checkbox" name="example5" value="4" id="example5d" /&gt;
					&lt;label for="example5d"&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons in list item with explicit labels-->
			<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>
			<details class="mrgn-bttm-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios horizontaux dans un modèle d'éléments &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;ul class="form-inline list-unstyled"&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="1" id="example6a" required="required" /&gt;
					&lt;label for="example6a"&gt;Pomme&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="2" id="example6b" /&gt;
					&lt;label for="example6b"&gt;Orange&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="3" id="example6c" /&gt;
					&lt;label for="example6c"&gt;Kiwi&lt;/label&gt;
				&lt;/li&gt;
				&lt;li class="label-inline"&gt;
					&lt;input type="radio" name="example6" value="4" id="example6d" /&gt;
					&lt;label for="example6d"&gt;Autre&lt;/label&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- checkboxes inline with implicit labels-->
			<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>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d'éléments &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;label for="example7a" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="1" id="example7a" required="required" /&gt;Téléphone intelligent&lt;/label&gt;
			&lt;label for="example7b" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="2" id="example7b" /&gt;Ordinateur portatif&lt;/label&gt;
			&lt;label for="example7c" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="3" id="example7c" /&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;label for="example7d" class="checkbox-inline"&gt;&lt;input type="checkbox" name="example7" value="4" id="example7d" /&gt;Réacteur à fusion&lt;/label&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons inline with implicit labels-->
			<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>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radio horizontaux dans un modèle d'éléments &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; comportant des étiquettes implicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;label for="example8a" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="1" id="example8a" required="required" /&gt;Téléphone intelligent&lt;/label&gt;
			&lt;label for="example8b" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="2" id="example8b" /&gt;Ordinateur portatif&lt;/label&gt;
			&lt;label for="example8c" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="3" id="example8c" /&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;label for="example8d" class="radio-inline"&gt;&lt;input type="radio" name="example8" value="4" id="example8d" /&gt;Réacteur à fusion&lt;/label&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- checkbox inline list item with explicit labels-->
			<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>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Cases à cocher horizontales dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="1" id="example9a" required="required" /&gt;
				&lt;label for="example9a"&gt;Téléphone intelligent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="2" id="example9b" /&gt;
				&lt;label for="example9b"&gt;Ordinateur portatif&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="3" id="example9c" /&gt;
				&lt;label for="example9c"&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="checkbox" name="example9" value="4" id="example9d" /&gt;
				&lt;label for="example9d"&gt;Réacteur à fusion&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<!-- radio buttons inline list item with explicit labels-->
			<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>
			<details class="mrgn-bttm-md mrgn-tp-md">
				<summary>Voir le code</summary>
				<pre><code>&lt;div class="wb-frmvld"&gt;
	&lt;form action="#" method="get" id="validation-example"&gt;
		...
		&lt;fieldset class="form-inline chkbxrdio-grp"&gt;
			&lt;legend class="required"&gt;&lt;span class="field-name"&gt;Boutons radios horizontaux dans un modèle d’éléments &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; comportant des étiquettes explicites&lt;/span&gt; &lt;strong class="required"&gt;(obligatoire)&lt;/strong&gt;&lt;/legend&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="1" id="example10a" required="required" /&gt;
				&lt;label for="example10a"&gt;Téléphone intelligent&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="2" id="example10b" /&gt;
				&lt;label for="example10b"&gt;Ordinateur portatif&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="3" id="example10c" /&gt;
				&lt;label for="example10c"&gt;Système d’assistance vocale&lt;/label&gt;
			&lt;/div&gt;
			&lt;div class="label-inline"&gt;
				&lt;input type="radio" name="example10" value="4" id="example10d" /&gt;
				&lt;label for="example10d"&gt;Réacteur à fusion&lt;/label&gt;
			&lt;/div&gt;
		&lt;/fieldset&gt;</code></pre>
			</details>

			<input type="submit" value="Soumettre" class="btn btn-primary" /> <input type="reset" value="Réinitialiser la page aux valeurs par défaut" class="btn btn-link btn-sm show p-0 mrgn-tp-md" />
		</form>
	</div>

	<noscript>
		<p>Ce formulaire ne peut pas être soumis sans Javascript. Veuillez utiliser une des méthodes précisées ci-dessous&#160;:</p>
		<ul>
			<li>Méthode 1</li>
			<li>Méthode 2</li>
			<li>Méthode n</li>
		</ul>
	</noscript>
</section>

<section>
	<h2>Cas d'essai particulier</h2>
	<p>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.</p>
	<h3><code>&lt;div></code> entre le formulaire et le plugin de validation de formulaire</h3>
	<p>Lorsqu'il y a une balise <code>&lt;div></code> enveloppant l'élément <code>&lt;form></code> entre le formulaire et le plugin de validation.</p>
	<div class="row">
		<div class="col-md-6">
			<div class="wb-frmvld">
				<div id="app-root">
					<form action="#" method="get" id="edge-test-1">
						<div class="form-group">
							<label for="edge-test-1-fruit" class="required"><span class="field-name">Choisissez un fruit :</span> <strong class="required">(obligatoire)</strong></label>
							<select class="form-control" id="edge-test-1-fruit" name="fruit" required="required">
								<option label="Choisissez un fruit"></option>
								<option value="Pomme">Pomme</option>
								<option value="Orange">Orange</option>
								<option value="Kiwi">Kiwi</option>
							</select>
						</div>
						<button class="btn btn-default" type="submit">Soumettre</button>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<p>Code source</p>
			<pre><code>&lt;div class="wb-frmvld">
	&lt;div id="app-root">
		&lt;form action="#" method="get" id="edge-test-1">
			...
		&lt;/form>
	&lt;/div>
&lt;/div></code></pre>
		</div>
	</div>
</section>
