• laurent@lioncoding.com

Dans cet article, nous allons présenter comment grâce à JQuery, nos formulaires vont prendre une forme bien plus moderne et agréable.

Sur la toile, il y a de plus en plus de formulaires intélligents, c’est-à-dire qu’ils nous signalent, aussitôt détectées, toutes les erreurs syntaxiques qui seront refusées à la validation. C’est extremement pratique, car, en plus de signaler à l’internaute que les champs ne sont pas syntaxiquement corrects, cette prévalidation limite les allers-retours avec le serveur. Ceux-ci sont forcément plus longs et procurent donc une expérience utilisateur moins agréable. Nous rappelons tout de même que, pour des raisons de sécurité, tous les contrôles côté client doivent être effectués côté serveur car l’utilisateur peut les désactiver.

Mécanisme de validation client-serveur

  1. Validation côté client des erreurs syntaxiques (ex : email erroné ou mot de passe non sécurisé)

  2. Soumission du formulaire;

  3. Validation serveur qui vérifie les erreurs de données (ex : paramètres de connexion introuvables);

  4. Réponse du serveur : succès ou erreur de soumission.

Pour ce article nous essayerons de faire un maximum de validations à l’étape 1.

Deux minutes pour moderniser son formulaire

Tout d’abord, ci-dessous la structure de notre projet:

Nous vous proposons d’utiliser Bootstrap 4.0.0 pour styliser le formulaire et JQuery 3.2.1 pour les contrôles.

Voici le formulaire que je vous propose:

Figure 1: Formulaire d’authentification.

Par défaut, le bouton d’authentification est désactivé. On ne l’activera que si les champs de saisie ont été bien renseignés. Voici son code HTML(le code du fichier signin.html) :

<!DOCTYPE html>
<html>
    <head>
        <title>User Login</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="custom.css">
        <script src="jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="control.js"></script>
    </head>
    <body>
        <div id="signinModal" class="text-center">
            <div class="modal-dialog">
                <div class="col-lg-10 col-sm-10 col-12 main-section">
                    <div class="modal-content">
                        <div class="col-lg-12 col-sm-12 col-12 user-img">
                            <img src="image/man.png">
                        </div>
                        <div class="col-lg-12 col-sm-12 col-12 user-name">
                            <h1>User Login</h1>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="col-lg-12 col-sm-12 col-12 form-input">
                            <form id="signinForm" class="was-validated">
                                <div class="form-group">
                                    <input type="email" id="email" class="form-control" placeholder="E-mail adress" style="text-align: center;">
                                    <span id="email_error" class="error"></span>
                                </div>
                                <div class="form-group">
                                    <input type="password" id="password" class="form-control" placeholder="Password" minlength="8" style="text-align: center;">
                                    <span id="passsword_error" class="error"></span>
                                </div>
                                <button type="submit" id="signin" class="btn btn-success" disabled="true">Login</button>
                            </form>
                            <script type="text/javascript" src="control.js"></script>
                        </div>
                        <div class="col-lg-12 col-sm-12 col-12 link-part">
                            <a href="">Forgot password ?</a> -- 
                            <a href="">Signup</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Pour le style, le fichier CSS custom.css a été utilisé et son contenu est ci-dessous:

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url(BarlowSemiCondensed-Regular.otf);
}

body{
    font-family: "Barlow", sans-serif;
}
.main-section{
    margin: 0 auto;
    margin-top:100px;
    background-color: #fff;
    border-radius: 5px;
    padding: 0px;
}
.user-img{
    margin-top:-50px;
}
.user-img img{
    height: 100px;
    width: 100px;
}
.user-name{
    margin:10px 0px;
}
.user-name h1{
    font-size:30px;
    color:#676363;
}
.user-name button{
    position: absolute;    
    top:-50px;
    right:20px;
    font-size:30px;
}
.form-input button{
    width: 100%;
    margin-bottom: 20px;
}
.link-part{
    border-radius:0px 0px 5px 5px;
    background-color: #ECF0F1;
    padding:15px;
    border-top:1px solid #c2c2c2;
}
.open-modal{
    margin-top:100px !important;
}
.error{
    color: red;
}

Vous aurez le lien d’accès à tout le projet en fin d’article sur github donc ne vous inquiétez pas pour les fichiers dont vous ne disposez pas pour l’instant. L’essentiel est de suivre les étapes de validation du fomulaire.

Maintenant nous alons mettre en place le contrôle dans le fichier control.js. Si l’adrese email et le mot de passe ne sont pas bien renseignés, l’utilisateur est notifié et le bouton de validation reste désactivé; au cas contraire, ce dernier restera activé.

email not correct image

Figure 2: Résultat de validation de l’email erroné.

Figure 3: Résultat de validation du mot de passe non sécurisé.

Figure 4: Formulaire bien rempli. Le bouton d’authentification est maintenant activé.

Code de validation du formulaire

Pour valider le formulaire, nous aurons besoin d’utiliser deux expressions régulières.

La première pour valider l’adresse email dont voici la syntaxe:

^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)

Pour plus de détails sur les expressions régulières en JavaScript visitez ce site.

La deuxième permettra de valider la robustesse du mot de passe. Nous allons forcer l’utilisateur à entrer un mot de passe sécurisé, à savoir qu’il devra avoir :

La syntaxe de l’expression régulière correspondante est:

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[-_!@#\$%\^&\*])(?=.{8,})-_!@#\$%\^&\*

Voici le code complet de validation:

$(function () {

    var emailRegex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    var strongPwdRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[-_!@#\$%\^&\*])(?=.{8,})");

    // To enable or disable login button
   $("#signinForm").bind("keyup", function (e) {

        var email=$("#email").val();
        var password=$("#password").val();

        if(emailRegex.test(email)==true && strongPwdRegex.test(password)==true)
        {
            $("#signin").attr("disabled",false);
        }
        else
        {
            $("#signin").attr("disabled",true);
        }
    });


    // To validate email entry
   $("#email").on("keyup", function (e) {

        var email=$("#email").val();

        if(email.length==0){
            $("#email_error").text("");
        }
        else if(emailRegex.test(email)==false)
        {
            $("#email_error").text("Invalid email");
        }
        else
        {
            $("#email_error").text("");
        }             
    });


    // To validate password entry
   $("#password").on("keyup", function (e) {

        var passwordValue=$("#password").val();

        if(passwordValue.length==0){
            $("#passsword_error").text("");
        }
        else if(passwordValue.length<8)
        {
            $("#passsword_error").text("8 characters at least");
        }
        else if(strongPwdRegex.test(passwordValue)==false)
        {
            $("#passsword_error").text("Unsecured password");
        }
        else
        {
            $("#passsword_error").text("");
        }             
    });


});

Voici la Démo et le Code source.