Modifie les informations de localisation
La validation de l'email est un point capital lors de la validation d'un formulaire HTML. Dans ce document, nous allons voir comment javascript peut permettre de valider un email
Un email est une chaîne (un sous-ensemble de caractères ASCII) séparée en deux parties par le symbole @. un " info_personnelle " et un domaine, c'est-à-dire info_personnelle@domaine. La longueur de la partie info_personnelle peut aller jusqu'à 64 caractères et le nom de domaine peut aller jusqu'à 253 caractères.
La partie info personnelle contient les caractères ASCII suivants.
Lettres anglaises majuscules (A-Z) et minuscules (a-z).
Chiffres (0-9).
Caractères ! # $ % & ' * + - / = ? ^ _ ` { | } ~
Caractère . ( point, point ou point final) à condition qu'il ne soit pas le premier ou le dernier caractère et qu'il ne vienne pas l'un après l'autre.
La partie du nom de domaine (tld) [par exemple com, org, net, in, us, info] contient des lettres, des chiffres, des traits d'union et des points.
monsite@notreTerre.com
mon.nom@monsite.org
monsite@vous.moi.net
monsite.notreTerre.com [le @ est absent].
monsite@.com.moi [ tld (domaine de premier niveau) ne peut pas commencer par un point "."]
@vous.moi.net [ Aucun caractère avant @ ]
monsite123@gmail.b [ ".b" n'est pas un tld valide]
monsite@.org.org [ le tld ne peut pas commencer par le point "."]
.monsite@mysite.org [ un email ne doit pas commencer par un "."]
monsite()*@gmail.com [ ici, l'expression régulière n'autorise que les caractères, les chiffres, les traits de soulignement et les tirets ].
monsite..1234@yahoo.com [ le double points n'est pas autorisés]
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>JavaScript form validation email</title>
<style>
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
input {
font-size: 20pt;
margin: 10px 20px;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style>
<script>
function checkEmail()
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(form1.text1.value.match(mailformat))
{
return true;
}
else
{
alert("Vous avez saisi une adresse électronique non valide !");
document.form1.text1.focus();
return false;
}
}
</script>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<form name="form1" action="#">
<ul>
<li>
<label>Votre adresse mail : </label><input type='text' name='text1' onchange="checkEmail(document.form1.text1)" ></li>
<li><label>Votre téléphone : </label><input type='text' name='telephone' ></li>
<li class="submit"><input type="submit" name="submit" value="Envoyer" onclick="checkEmail()"/></li>
<li> </li>
</ul>
</form>
</div>
</body>
</html>
Dans ce code nous avons utilisé l’événement onload dans la balise body qui donne le focus au champ de saisie de l’email.
Puis nous avons la fonction checkEmail(), qui va vérifier la forme de l’adresse email saisie, si vous ne changez pas le contenu ou si vous saisissez une adresse valide rien ne se passe et vous pouvez continuer. Si non donc vous avez changé le contenu en saisissant une adresse mail dont la forme est invalide le message apparait dés que vous quittez le champ de saisie de l’email.
Nous avons aussi fait appel à l’événement onclick qui se déclenche lorsque vous envoyez le formulaire.