Discussion :

[jicayom]

Bonjour,

J'espère poster au bon endroit...
Étant un récent développeur MVC pour une appli, je rencontre des petites difficultés pour effectuer la vérification d'un champ password pour qu'il soit :
- au moins de 8 caractères,
- avec au moins 1 chiffre ET 1 lettre
- avec au moins 1 majuscule ET 1 minuscule

J'ai réussi à procéder à cette vérification mais côté serveur. J'aimerais pouvoir le faire côté client pour éviter des retours côté serveur et je pense que cela est plus sécurisé.

Je rencontre des difficultés dans la partie layout, sur le modèle de vue créé.
J'ai trouvé des choses intéressantes sur le net, mais assez complexe ou lourde à mettre en place.

J'ai un pop up apparaissant à la 1ère connexion, pour effectuer le changement de password.
J'ai donc 3 champs :
- Old password,
- New password,
- Confirmation new password

J'ai un JS qui se charge de vérifier la regex pour le nouveau password :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$("#change_password-wrap").submit(function () {
    if ($("li:nth-child(2)").val() == /^.*(?=.{8,})(?=.*[a-z])(?=.*[\d])(?=.*[[A-Z]|[@!#$%]).*$/) {
        $("span").text("Validated...").show();
        return true;
    }
    $("NewPassword").text("Mauvais choix de password").show();
    return false;
});

Cela fonctionne mais j'ai des problèmes pour faire afficher "Mauvais choix de password" à côté du champs "New Password".

Dans ma view MVC :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
@model AppliWeb.UIModels.ChangePasswordModel
 
@{
    ViewBag.Title = Html.Resource("LOGIN_TITLE");
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
    <div id="change_password-wrap">
        @using (Html.BeginForm("ChangePassword", "Account", FormMethod.Post))
        {
            <div class="form-row">
                <h3>@Html.Resource("CHANGE_PWD_INFO")</h3>
            </div>
 
            <div class="form-row">
                <label>
                    @Html.Resource("CHANGE_PWD_TEMP_PASSWORD_LABEL")
                </label>
                @Html.PasswordFor(p => p.OldPassword)
                @Html.ValidationMessageFor(m => m.OldPassword)
            </div>
 
            <div class="form-row">
                <label>
                    @Html.Resource("CHANGE_PWD_NEW_PASSWORD_LABEL")
                </label>
                @Html.PasswordFor(p => p.NewPassword)
                @Html.ValidationMessageFor(m => m.NewPassword, null, new { id = "NewPassword" })
            </div>
 
            <div class="form-row">
                <label>
                    @Html.Resource("CHANGE_PWD_NEW_PASSWORD_CONFIRM_LABEL")
                </label>
                @Html.PasswordFor(p => p.ConfirmPassword)
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>
 
            <div class="form-row">
                <button type="submit" class="btn saveandcontinue right">@Html.Resource("BTN_SAVE_AND_CONTINUE")</button>
            </div>
        }
    </div>

Ma fonction JS fonctionne, seulement le message "Mauvais choix de password" s'affiche à côté des 3 champs (oldPassword, newPassword, confirmPassword).

J'ai essayé tout d'abord de l'afficher via le SPAN en ajoutant l'attribut span:nth-child(2) mais cela s'affiche en dehors de mon formulaire, dans un autre SPAN utilisé dans la page... Chose que je ne comprends pas...
J'ai essayé via le li:nth-child(2) mais le message s'affiche sur les 3 champs du formulaires malgré le fait de préciser de le mettre sur la 2ème ligne ou de donner un ID à mon champs NewPassord...

J'ai vu également une façon très simple de le faire via HTML5 mais je ne peux l'implémenter dans ma vue MVC car il m'indique des erreurs de syntaxes(notamment sur la regex) et je ne vois pas comment l'adapter à ma vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{8,32}" name="NewPassword" onchange=" this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 8 characters, including UPPER/lowercase and numbers' : ''); if(this.checkValidity()) form.ConfirmPassword.pattern = this.value; "></p> <p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{8,32}" name="ConfirmPassword" onchange=" this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : ''); "></p>

Est-ce que j'ai zappé qqch pour qu'il ne m'affiche pas correctement ?
Avez-vous d'autres méthodes d'implémentations ?

Merci d'avance.

[jicayom]

Petit up

J'ai beau retourner le problème dans tous les sens... Impossible d'afficher le message "Mauvais password" uniquement au niveau du champs "NewPassword".
Il s'affiche au niveau des 3 champs.

J'ai ajouté un ID sur mon label dans ma vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="form-row">
                <label>
                    @Html.Resource("CHANGE_PWD_NEW_PASSWORD_LABEL")
                </label>
                @Html.PasswordFor(p => p.NewPassword)
                @Html.ValidationMessageFor(m => m.NewPassword, null, new { id = "NewPassword" })
            </div>

Dans mon JS, j'ai ajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("NewPassword").text("Mauvais choix de password").show();

Mais rien ne s'affiche...

lorsque j'ajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("span").text("Mauvais choix de password").show();

Cela s'affiche sur les 3 champs, ce qui est normal...

Comment l'afficher uniquement sur le champs voulu ?

[fguigui]

des fois faudrait-il pas mieux faire :
$("#NewPassword").text("Mauvais choix de password").show();

à la place de :
$("NewPassword").text("Mauvais choix de password").show();

[jicayom]

Bonne remarque effectivement.
J'avais testé les 2 cas mais résultat identique.

Je viens enfin de trouver :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$("#NewPassword.field-validation-valid").text("Mauvais choix de password").show();

Je ne comprends pas pourquoi je dois spécifier .field-validation-valid
Toujours est-il que cela fonctionne.
Si qqun a une explication je suis preneur.

[fguigui]

ben sans doute parce que c'est un champ razor.
En tous les cas un html.helper de razor, que tu reprend en javascript / jquery.

[fguigui]

dis moi je serais preneur de ta solution validation client

[jicayom]

dis moi je serais preneur de ta solution validation client

Il suffit de reprendre mon JS pour l'adapter à ton formulaire.