Valider les formulaires simplement, et sans JavaScript

S'il y a bien une action redondante et qui nécessite de passer par la case JavaScript, c'est bien la validation des formulaires ! Mais sachez qu'il est possible de les valider sans utiliser une seule ligne de code ! J'avoue, je triche un peu quand je dis ça. En réalité il n'y a rien de magique et il faudra tout de même inclure trois scripts pour réaliser cela, mais il ne sera pas nécessaire que vous écriviez du JavaScript.

Voyons ici quel sont ces scripts et parcourons les différents cas de figure pour valider des champs vides, vérifier qu'un email est bien formé ou encore qu'une confirmation de mot de passe correspond bien au mot de passe initialement tapé. Par exemple, pour vérifier qu'un champ « Pseudo » est bien remplis et indiquer la place de son message d'erreur, il suffirait de le déclarer dans un formulaire comme ceci :

<label for="pseudo">Pseudo</label>
<input type="text" name="pseudo" id="pseudo" placeholder="MachinisteWeb"
       data-rule-required="true"
       data-msg-required="Le champ Pseudo est requis." />
<span data-valmsg-for="pseudo" data-valmsg-replace="true"></span>

C'est donc parti pour :

1. Trouver votre bonheur dans l'exemple complet suivant : http://codepen.io/MachinisteWeb/pen/AzJgF/

2. Ou/Et lire la suite de ce billet pour en apprendre un peu plus sur le jQuery Validation Unobstrusive Plugin.

Les 3 Scripts Magiques

jQuery

Le premier des trois scripts est l'incontournable jQuery. Celui-ci va servir aux deux suivants pour cibler les champs à valider de manière simple sur tous les types de navigateur, mais ça, vous le saviez probablement déjà.

jQuery Validate Plugin

Le deuxième script est le de plus en plus populaire jQuery Validate Plugin qui avec un ensemble d'instructions JavaScript permet de manager la manière dont le formulaire doit se comporter lors de la validation post soumission. C'est là généralement (même si vous utilisez habituellement un autre script que ce plugin) que vous répéter toujours le même code JavaScript redondant pour assigner vos messages d'erreur à vos inputs.

jQuery Validation Unobstrusive Plugin

Voici le troisième script magique qui va vous permettre de pré-valider votre formulaire côté client sans utiliser une seule ligne de JavaScript sur votre page ! Si vous n'y connaissez rien, et bien c'est le moment de jouer un peu avec votre DOM... uniquement à la main depuis le code HTML !

Note : le plus gros défaut de ce plugin est qu'il doit être utilisé dans un cadre de travail Microsoft. Dans tous autres cas, Microsoft ce réserve le droit de vous en interdire l'utilisation. Vous voilà donc prévenu :)

Mise en place rapide

Voici un petit formulaire sans prétention qui va fonctionner...

Partie utile placée dans Body

<form action="" method="post">
    <div class="field">
        <label for="pseudo">Pseudo</label>

        <!-- Ajout de data-rule-required et data-msg-required -->
        <input type="text" id="pseudo" name="pseudo" placeholder="MachinisteWeb"
               data-rule-required="true"
               data-msg-required="Le champ Pseudo est requis."
        />

        <!-- Placement du message d'erreur dédié spécifiquement. -->
        <span data-valmsg-for="pseudo" data-valmsg-replace="true"></span>
    </div>

    <!-- Ajout de la liste total des messages d'erreur pour information. -->
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul>
            <li style="display:none"></li>
        </ul>
    </div>

    <div class="submit">
        <input type="submit" value="Valider" />
    </div>
</form>

...une fois nos trois scripts mis en place.

Appel des trois scripts, de préférence en pied de Body

<!-- jQuery -->
<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<!-- jQuery Validate Plugin -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js'></script>
<!-- jQuery Validation Unobstrusive Plugin -->
<script src='//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js'></script>

Il ne reste alors plus qu'a styler les messages d'erreur...

CSS pour styler les messages d'erreur

/* Couleur des messages d'erreur totaux */
.validation-summary-errors,
/* Couleur des messages d'erreur spécifiques */
.field-validation-error {
  color: #f00;
}

/* Couleur des bord des champs spécifiques */
.input-validation-error {
  border: 1px solid #f00;
}

Voir tous les types de champs !

Vous pouvez consulter ici tous les autres types de champs et fonctionnement custom avec quelques lignes de JavaScript.