Adapter une vérification d'email dans un formulaire
Xavierrainbow
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Xavierrainbow Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Xavierrainbow Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
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>
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:
- Adapter une vérification d'email dans un formulaire
- Whatsapp formulaire opposition - Guide
- Comment creer un compte email - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Verification lien internet - Guide
1 réponse
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;
}
};
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;
}
};