Adapter une vérification d'email dans un formulaire

Fermé
Xavierrainbow Messages postés 2 Date d'inscription mardi 10 septembre 2013 Statut Membre Dernière intervention 12 septembre 2013 - 10 sept. 2013 à 05:20
Xavierrainbow Messages postés 2 Date d'inscription mardi 10 septembre 2013 Statut Membre Dernière intervention 12 septembre 2013 - 12 sept. 2013 à 23:39
Bonjour,






Je souhaiterais ajouter la vérification d'une adresse email du genre :

function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
return false;
}
else
{
return true;
}
}


Dans ce formulaire :

(function() { // On utilise une IEF pour ne pas polluer l'espace global

function deactivateTooltips() {

var spans = document.getElementsByTagName('span'),
spansLength = spans.length;

for (var i = 0 ; i < spansLength ; i++) {
if (spans[i].className == 'tooltip') {
spans[i].style.display = 'none';
}
}

}

// La fonction ci-dessous permet de récupérer la « tooltip » qui correspond à notre input

function getTooltip(element) {

while (element = element.nextSibling) {
if (element.className === 'tooltip') {
return element;
}
}

return false;

}

// Fonctions de vérification du formulaire, elles renvoient « true » si tout est OK

var check = {}; // On met toutes nos fonctions dans un objet littéral


check['information.companyName'] = function(id) {

var name = document.getElementById(id),
tooltipStyle = getTooltip(name).style;

if (name.value.length <= 35) {
name.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
name.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

check['information.contactName'] = check['information.companyName']; // La fonction pour le prénom est la même que celle du nom


!!! ICI !!!


check['pwd1'] = function() {

var pwd1 = document.getElementById('pwd1'),
tooltipStyle = getTooltip(pwd1).style;

if (pwd1.value.length >= 6) {
pwd1.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd1.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

check['pwd2'] = function() {

var pwd1 = document.getElementById('pwd1'),
pwd2 = document.getElementById('pwd2'),
tooltipStyle = getTooltip(pwd2).style;

if (pwd1.value == pwd2.value && pwd2.value != '') {
pwd2.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd2.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};
// Mise en place des événements

(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.

var myForm = document.getElementById('myForm'),
inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;

for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {

inputs[i].onkeyup = function() {
check[this.id](this.id); // « this » représente l'input actuellement modifié
};

}
}

myForm.onsubmit = function() {

var result = true;

for (var i in check) {
result = check[i](i) && result;
}

if (result) {
alert('Le formulaire est bien rempli.');
}

return false;

};

myForm.onreset = function() {

for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].className = '';
}
}

deactivateTooltips();

};

})();


// Maintenant que tout est initialisé, on peut désactiver les « tooltips »

deactivateTooltips();

})();


J'avais essayé ceci mais ça ne marche pas :

check['infoemail'] = function verifMail(infoemail) {

var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/,
tooltipStyle = getTooltip(infoemail).style;

if (!regex.test(infoemail.value)) {
infoemail.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
infoemail.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};

C'est mes début en codage, ...

Merci beaucoup pour votre aide!

PS : le html :
</header>

<form id="myForm">

<label class="form_col" for="information.contactName">Nom du contact *</label>
<input name="information.contactName" id="information.contactName" type="text" value maxlength = "36"/>
<span class="tooltip">Un nom de contact ne doit pas comporter plus de 35 caractères</span>
<br /><br />

<label class="form_col" for="information.companyName">Nom *</label>
<input name="information.companyName" id="information.companyName" type="text" value maxlength= "36"/>
<span class="tooltip">Un nom de société ne doit pas comporter plus de 35 caractères</span>
<br /><br />

<label class="form_col" for="infoemail">Email *</label>
<input name="infoemail" id="infoemail" type="text" value maxlength= "50" />
<span class="tooltip">Merci de rentrer un email valide</span>
<br /><br />

<label class="form_col" for="pwd1">Mot de passe *</label>
<input name="pwd1" id="pwd1" type="password" />
<span class="tooltip">Le mot de passe ne doit pas faire moins de 6 caractères</span>

<br /><br />

<label class="form_col" for="pwd2">Confirmez le mot de passe *</label>
<input name="pwd2" id="pwd2" type="password" />
<span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
<br /><br />

<span class="form_col"></span>
<label><input name="news" type="checkbox" /> Je désire recevoir la newsletter chaque mois.</label>
<br /><br />

<span class="form_col"></span>
<input type="submit" value="M'inscrire" /> <input type="reset" value="Réinitialiser le formulaire" />

</form>
A voir également:

1 réponse

Xavierrainbow Messages postés 2 Date d'inscription mardi 10 septembre 2013 Statut Membre Dernière intervention 12 septembre 2013
12 sept. 2013 à 23:39
Trouvé tout seul comme un grand après avoir relu mes cours. :)

check['infoemail'] = function() {

var infoemail = document.getElementById('infoemail'),
regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/
tooltipStyle = getTooltip(infoemail).style;

if (regex.test(infoemail.value)){
infoemail.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
infoemail.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}

};
0