La validation des formulaires se fait avec Form Validator dont la documentation est à l'adresse http://www.formvalidator.net/
.js requis :
En ce qui concerne le select pour l'acceptabilité automatique, il faudrait en place de la class disabled ajouter la class accepted si accepté ou no-accepted dans le cas contraire
Il faut que les boutons avec la class js-dropdown__simple--btn.filter-btn comportent un élément span dans lequel le texte sera écrit et un élémént i pour l'icone (voir exemple ci-dessous)
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01">label checkbox</label>
</div>
<div class="o-checkbox disabled">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01">label checkbox</label>
</div>
<div class="o-input__holder">
<div class="c-label">Lorem ipsum dolor sit amet ?</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--02" name="checkbox"/><span></span>
<label for="checkbox--02"><i class="c-fonticon__icon-panda"></i>label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--03" name="checkbox"/><span></span>
<label for="checkbox--03">label checkbox</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--04" name="checkbox"/><span></span>
<label for="checkbox--04">label checkbox</label>
</div>
</div>
<div class="u-flex">
<div class="c-radio">
<input type="radio" id="radio--0undefined" name="radio"/><span></span>
<label for="radio--0undefined">label radio</label>
</div>
<div class="c-radio u-hBubble">
<input type="radio" id="radio--0undefined" name="radio"/><span></span>
<label for="radio--0undefined">label radio</label>
</div>
</div>
<div class="o-input__holder">
<div class="c-label">Lorem ipsum dolor sit amet ?</div>
<div class="c-radio">
<input type="radio" id="radio--0undefined" name="radio"/><span></span>
<label for="radio--0undefined"><i class="c-fonticon__icon-panda"></i>label radio</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--00" name="radio"/><span></span>
<label for="radio--00">label radio</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--01" name="radio"/><span></span>
<label for="radio--01">label radio</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--02" name="radio"/><span></span>
<label for="radio--02">label radio</label>
</div>
</div>
<div class="o-input__holder">
<div class="c-label">
<label for="input--text--01">Input text 01<span class="is-required">*</span></label>
</div>
<input type="text" id="input--text--01" data-validation="email"/>
</div>
<div class="o-input__holder">
<div class="c-label">
<label>Input with unit</label>
</div>
<input type="number" id="inputUnit" data-validation="email"/>
<div class="c-unit">%</div>
</div>
<div class="o-input__holder">
<div class="c-label">
<label>Input Search 01</label>
</div>
<div class="o-input-search">
<input type="search" id="input--search--01"/><i class="c-fonticon__icon-search"></i>
</div>
</div>
<div class="o-input__holder">
<label>Select</label>
<div class="c-select ">
<select>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select><i class="c-fonticon__icon-chevron"></i>
</div>
</div>
<div class="o-input__holder">
<label>Select Light</label>
<div class="c-select c-select--light">
<select>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select><i class="c-fonticon__icon-chevron"></i>
</div>
</div>
<div class="o-input__holder">
<label>Select</label>
<div class="c-select disabled">
<select>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
</select><i class="c-fonticon__icon-chevron"></i>
</div>
</div>
<div class="o-input__holder is-tall">
<div class="c-label">
<label for="textarea--01">Textarea 01<span class="is-required">*</span></label>
</div>
<textarea id="textarea--01"></textarea>
</div>
Sur l'input Date, il faut avoir un attribut data-value="2022/12/20".
Si il n'y a pas de date de renseignée, la valeur doit être vide ex: data-value="".
Facultatif :
Pour avoir un format de date spécifique sur un input, ajouter l'attribut data-formatdate="XX-XX-XX" avec le format souhaité, en respectant la tableau ci dessous.
| Régle | Description | Résulat |
|---|---|---|
| d | Date du mois | 1 - 31 |
| dd | Date du mois avec zéro | 01 - 31 |
| ddd | Jour de la semaine raccourci | Lun - Dim |
| dddd | Jour de la semaine | Lundi - Dimanche |
| m | Mois de l'année | 1 - 12 |
| mm | Mois de l'année avec zéro | 01 - 12 |
| mmm | Nom du mois raccourci | Jan - Dec |
| mmmm | Nom du mois | Janvier - Décembre |
| yy | Année raccourci | 00 - 99 |
| yyyy | Année | 2000 - 2999 |
Exemple
Pour avoir un format 01/12/1989 il faut avoir dd-mm-yyy Pour avoir un format Lun 12 Janvier 89 il faut avoir dd-mmmm-yy
<div class="o-input-date">
<input type="date" data-value="YYYY/MM/DD"/><i class="c-fonticon__icon-calendar"></i>
</div>
<div class="o-input-date">
<input type="date" data-value="YYYY/MM/DD" data-formatdate="dd/mm/yyyy"/><i class="c-fonticon__icon-calendar"></i>
</div>
<label class="u-label">Input date with label</label>
<div class="o-input-date">
<input type="date" data-value="YYYY/MM/DD"/><i class="c-fonticon__icon-calendar"></i>
</div>
<div class="o-input-date">
<input type="date" disabled=""/><i class="c-fonticon__icon-calendar"></i>
</div>
<div class="o-input__holder">
<div class="c-label">
<label>Input Text Error</label>
</div>
<input class="error" type="text" id="17" data-validation="email"/><span class="help-block form-error">Vous n'avez pas saisi une adresse e-mail valide</span>
</div>
<div class="o-input__holder">
<div class="c-label">
<label>Avatar :</label>
<div class="u-form--info">Formats acceptés : .pdf, .jpg, .doc</div>
</div>
<div class="c-form__item--file">
<input type="text" placeholder="Ajouter un fichier" readonly="readonly" data-validation="mime size required" data-validation-allowing="pdf, jpg, png, doc" data-validation-max-size="300kb"/>
<div class="c-form__input--file">
<input type="file"/>
</div>
</div>
</div>