Sélection de la langue

Recherche

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
Visualiser 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" 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>
Visualiser 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" required="required" pattern=".{2,}" data-rule-minlength="2" />
		</div>
Visualiser 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" required="required" pattern=".{2,}" data-rule-minlength="2" />
		</div>
Visualiser 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" required="required" data-rule-phoneUS="true" />
		</div>
View 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" required="required" data-rule-postalCodeCA="true" />
		</div>
Visualiser 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" />
		</div>
Visualiser 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 (http://www.url.com)</span></label>
			<input class="form-control" id="url1" name="url1" type="url" />
		</div>
Visualiser 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
Visualiser 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>
Visualiser 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>
Visualiser 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>
Visualiser 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>
Visualiser 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>
Visualiser 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>
Visualiser 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>
View 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>
View 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>
View 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>
View 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>
Visualiser 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" 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" maxlength="10" size="10" data-rule-equalTo="#password1" />
		</div>
Animaux favoris (obligatoire)
Visualiser le code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset>
			<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)
Visualiser le code
<div class="wb-frmvld">
	<form action="#" method="get" id="validation-example">
		...
		<fieldset>
			<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>
Signaler un problème sur cette page
Veuillez cocher toutes les réponses pertinentes :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

Date de modification :