Afficher un message d'erreur lors de la connexion via son mail

[Mat]

Bonjour,

J'ai déjà eu plusieurs fois dans l'année, des membres qui n'arrivent pas à se connecter sur mon forum, tout simplement parce qu'ils indiquent leur mail pour se connecter et non leur pseudo (et aussi parce qu'ils ne lisent pas le message d'erreur ).

Je voudrais savoir s'il serait possible d'indiquer un message lorsque le caractère @ est détecté dans la zone de texte pseudo.

Capture d'illustration:

Merci d'avance

[Bipo]

Salut Mat,

Panneau d'administration → Modules → HTML & JAVASCRIPT - Gestion des codes Javascript

Ce script est a appliquer sur toutes les pages du forum.

Code:

location.pathname == "/login" && $(function() {

    $(".page-header").after('<input id="username_issue" style="font-size:12px; width:inherit; display:none;" class="block-content-error" value="Vous ne pouvez pas vous connecter avec votre adresse mail." />');

    var username_format = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var p = $("input[name='username']");

    var u = function() {
        if (!username_format.test(p.val())) {
            $("#username_issue").css("display", "none");
            $("input[name='login']").prop('disabled', false);
        } else {
            $("#username_issue").css("display", "block");
            $("input[name='login']").prop('disabled', true);
        }
    };

    p.on('change keyup', function() {
        u()
    });

});

Alors... j'ai passé une heure 1/2 à le coder parce que je t'aime bien hein

1) J'ai fait en sorte que le script ne s'applique que sur la page /login ;

2) Ton message d'erreur est formalisé à la ligne 3 du code que tu peux modifier selon tes désirs... ;

3) La variable username_format permet de détecter si le champ username contient une adresse e-mail. A ce sujet, j'ai été un peu plus loin que ta demande originelle. En effet, j'ai pris en considération qu'un membre pourrait s'enregistrer avec le pseudo @lexandre, @ntitrust etc... Du coup, cela voudrait dire que le membre aurait un message d'alerte quand le @ est dans le champ, ce qui est pas top. Du coup, j'ai fait en sorte que le message s'affiche quand il détecte la forme suivante : x @ x . xx ! Ainsi, cela couvre toutes les formes d'adresses emails possibles.

Grosso modo, pour le reste, je fais un test sur le champ username :

• Si le pseudo n'est pas une adresse e-mail, alors pas de message d'erreur
  
• Sinon, si le pseudo est une adresse e-mail, alors il affiche le message d'erreur.

Toutefois... je me suis permis d'ajouter une sécurité en plus que tu n'as pas demandé...

• Si le pseudo n'est pas une adresse e-mail, alors pas de message d'erreur et le bouton "Connexion" est opérationnel ;
  
• Sinon, si le pseudo est une adresse e-mail, alors il affiche le message d'erreur et le bouton "Connexion" est désactivé !

Ce petit ajout est formalisé par ces deux lignes :

Code:

$("input[name='login']").prop('disabled', false);

Code:

$("input[name='login']").prop('disabled', true);

Bien évidemment, si un membre rentre une adresse e-mail puis la retire pour entrer le pseudo, le script s'actualise directement pour retirer le message d'erreur et réactiver le bouton connexion ! L'élément qui permet cette exécution en dynamique est la dernière partie du code :

Code:

    p.on('change keyup', function() {
        u()
    });

Voilà voilà

[Mat]

Salut Bipo,

Ton script est vraiment top !
Un grand merci pour ton travail ^^

Alors... j'ai passé une heure 1/2 à le coder  parce que je t'aime bien hein 

J'ai juste eu ce problème graphique sur la version mobile :

Capture:

J'ai donc changé cette partie :

Code:

    $(".page-header").after('<input id="username_issue" style="font-size:12px; width:inherit; display:none;" class="block-content-error" value="Vous ne pouvez pas vous connecter avec votre adresse mail." />');

Pour la remplacer par celle-ci :

Code:

    $(".page-header").after('<p id="username_issue" style="font-size:12px; width:inherit; display:none;" class="block-content-error">Vous ne pouvez pas vous connecter avec votre adresse mail.</p>');

Je ne sais pas si c'est la meilleure façon de faire mais ça fonctionne (n'hésite pas à me le dire si ça peut-être fait d'une meilleure manière).

Encore merci

[Bipo]

Ta façon est bien meilleure :]

Bipo.

[Mat]

Merci
Je passe en résolu.