Vérification de l'email pour un formulaire

Bonjour / Bonsoir,

J'aimerais procéder à la vérif d'une adresse mail via une expression régulière, mais je dois admettre que c'est pas trop mon truc.

Voila ce que j'ai pour le moment :

<input id="MailClient" class="form-cadre" name="MailClient" type="email" placeholder="Exemple : marcel.duchamp@mail.fr" title="Remplir ce champ est nécessaire pour que je puisse vous répondre" onBlur="verifMail(this)" />

function verifMail(){
              var myRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
              if(!myRegex.test(this.value)){
                $('li#li-mail').css("background-color","rgb(245,62,84)");
                return false;
              }
              else{
                $('li#li-mail').css("background-color","green");
                return true;
              }
            }

La regex est pompée d'ici et la sur internet, mais je comprends presque tout.

Ma condition me réponds toujours négatif. Qu'est ce qui ne va pas ? Merci d'avance pour ceux qui vondront bien m'aider !

Je te conseille de regrouper tout le code javascript à un seul endroit, dans ton exemple tu as du javascript dans le code html de la balise input ... puis une déclaration de fonction ailleurs ... on sait pas trop ou ...

ensuite l'utilisation du this n'a pas l'air maitrisé, les this de ton code contiennent l'objet "window".

utilises plutôt un gestionnaire d'évènement jquery puisque tu utilises cette bibliotheque, dans ce cas le "this" pointera vers le propriétaire de l'évènement c'est à dire le champ input.

Désolé pour le retour tardif et merci Zebrou ! Ca marche effectivement bien mieux comme tu me l'as conseillé.

Dernière question (peut être plus CSS que JS du coup...) : J'ai autours de mon champ email un cadre rouge lorsqu'il est mal remplit, comme si je lui avais mis un required en attribut. Puis je le désactiver ou le masquer en CSS ou autrement ? Je le trouve très inesthétique et inutile vu que j'ai des scripts js + php pour contrôler la saisie.

Vous pouvez aussi utiliser HTML5 pour la vérification du champ email sans JS.

<div>
     <label for="email">Votre adresse email</label>
     <input id="email" name="email" type="email" placeholder="votre.email@gmail.com" required aria-required="true">
</div>

Une saisie non conforme génère un message d'alerte avec required. De plus, les appareils à écran tactile (Android, iPhone, etc.) modifient l'affichage de leur clavier virtuel en fonction du type de saisie.

Beaucoup plus simple d'utilisation.

salut,
même si le post date un peu... Tu peux passer par CSS avec

input {box-shadow:none;outline:none}

Même s'il serait préférable de garder l'outline.

@creationrichart> Sauf que ça ne marchera pas sur les vieux navigateurs ni sur IE9. De plus, ce n'est pas le required qui provoque la vérification mais l'attribut "pattern". Dans ce cas, c'est le type "email" qui fait que la vérification s'effectue.