Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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" />  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>
<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>
Ce formulaire ne peut pas être soumis sans Javascript. Veuillez utiliser une des méthodes précisées ci-dessous :