Vérification formulaire en JavaScript

Résolu/Fermé

Rom190686 Messages postés 436 Date d'inscription mardi 29 avril 2008 Statut Membre Dernière intervention 20 novembre 2015 - 15 juil. 2010 à 20:43
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 16 juil. 2010 à 19:24

Bonjour,
Malgré mes nombreuses recherches, je ne trouve pas ce que je cherche dans les forums.
Je souhaite valider mes champs formulaire en JavaScript au moment du submit.
Cependant, tous les tutos que j'ai lu proposent l'ouverture d'une boite de dialogue lorsque que la vérification est fausse.
Moi je voudrais simplement qu'en dessous du champs formulaire une ligne en rouge indique : "le mail n'est pas correcte..., merci de renseigner votre nom..., etc....."
J'ai très peu de connaissance en JS car je développe mes site exclusivement en PHP.
Merci d'avance pour aide.

A voir également:

Vérification formulaire en JavaScript
Formulaire de réclamation facebook - Guide
Telecharger javascript - Télécharger - Langages
Vérification url - Guide
Formulaire instagram compte suspendu - Guide
Sms tiktok verification code ✓ - Forum Mail

5 réponses

Réponse 1 / 5

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 juil. 2010 à 00:46

Salut.

Si tu ne connais pas le Javascript il n'est pas trop tard pour l'apprendre.

Il suffit de placer le texte, invisibles par défaut, près des champs.
Ensuite, pour chaque vérification, tu affiches (ou pas) le texte invisible.

Par exemple :
https://gist.github.com/anonymous/5bd48dd224a0b3f9a585

Réponse 2 / 5

Rom190686 Messages postés 436 Date d'inscription mardi 29 avril 2008 Statut Membre Dernière intervention 20 novembre 2015 35
Modifié par Rom190686 le 16/07/2010 à 15:33

Bonjour et merci pour ton aide. J'ai testé ton code et c'est exactement ce que je recherche. Cependant, je n'arrive pas à l'adapter donc je colle mon code ci-dessous. Quand je clique sur "envoyer" aucune condition n'est remplie mais le formulaire ce poste tout de même.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script type="text/javascript">
var formulaire,
nomInput,
prenomInput,
emailInput,
messageTextarea;

window.onload = function() {
formulaire = document.forms[0];
nomInput = formulaire.elements['nom'];
prenomInput = formulaire.elements['prenom'];
emailInput = formulaire.elements['email'];
messageTextarea = formulaire.elements['message'];

formulaire.onsubmit = function() {
return verifier();
};
};

function verifier() {
var emailRegex = new RegExp('^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$','i');
var nbErrors = 0;

if(nomInput.value == '') {
nomInput.parentNode.getElementsByTagName('span')[0].style.display = 'block';
nbErrors++;
} else {
nomInput.parentNode.getElementsByTagName('span')[0].style.display = 'none';
}

if(prenomInput.value == '') {
prenomInput.parentNode.getElementsByTagName('span')[0].style.display = 'block';
nbErrors++;
} else {
prenomInput.parentNode.getElementsByTagName('span')[0].style.display = 'none';
}

if(!emailRegex.test(emailInput.value)) {
emailInput.parentNode.getElementsByTagName('span')[0].style.display = 'block';
nbErrors++;
} else {
emailInput.parentNode.getElementsByTagName('span')[0].style.display = 'none';
}

if(messageTextarea.value == '') {
messageTextarea.parentNode.getElementsByTagName('span')[0].style.display = 'block';
nbErrors++;
} else {
messageTextarea.parentNode.getElementsByTagName('span')[0].style.display = 'none';
}

return (nbErrors > 0) ? false : true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header-text">
<?php include("includes/en-tete.php");?>
</div>
</div>
<?php include("includes/menu.php");?>
<div id="content">
<div id="page">
<h1>Contactez nous !
<br />Une question ? Déposez votre demande</h1>
<p>Détaillez votre demande dans le formulaire ci-dessous :</p>
<p><i>Les champs marqués d'un <sup>(<b><font color="red">*</font></b>)</sup> sont obligatoires</i></p>
<form method="post" action="traitement-contact.php" >
<table>
<tr>
<td><label for="civilite">Votre civilité :</label></td>
<td><input type="text" name="civilite" id="civilite" maxlength="10" /></td>
</tr>
<tr>
<td><label for="nom">Votre Nom :</label></td>
<td><input type="text" name="nom" id="nom" maxlength="50" /></td>
<td><span class="hidden formError">Veuillez Renseigner un nom</span></td>
</tr>
<tr>
<td><label for="prenom">Votre prénom :</label></td>
<td><input type="text" name="prenom" id="prenom" maxlength="50" /></td>
<span class="hidden formError">Veuillez Renseigner un prénom</span>
</tr>
<tr>
<td><label for="email">Votre adresse e-mail :</label></td>
<td><input type="text" name="email" id="email" maxlength="50" /> <sup><b><font color="red">*</font></b></sup></td>
<span class="hidden formError">Veuillez Renseigner une adresse e-mail valide</span>
</tr>
<tr>
<td><label for="message">Votre question :</label><br /></td>
<td><textarea name="message" id="message" rows="5" cols="25"></textarea> <sup><b><font color="red">*</font></b></sup></td>
<span class="hidden formError">Veuillez Renseigner un message</span>
</tr>
<tr>
<td><input type="submit" name="envoyer" value="Envoyer votre demande"/></td>
</tr>
</table>
</form>
</div>
<div id="sidebar">
<?php include("includes/recommandation.php");?>
</div>
<?php include("includes/pied.php");?>
</div>
</div>
</body>
</html>

Merci d'avance
P.S. : les balises de mise en forme sont dans ma feuille de style

Réponse 3 / 5

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 juil. 2010 à 17:59

normal dans

<form method="post" action="traitement-contact.php" >

tu n'as pas nommé ton formualire

il faut mettre

<form name="formulaire" method="post" action="traitement-contact.php" >

pour que ce dernier soit accessible à la fonction

Rom190686 Messages postés 436 Date d'inscription mardi 29 avril 2008 Statut Membre Dernière intervention 20 novembre 2015 35
16 juil. 2010 à 18:31

Merci pour ton aide mais ça ne fonctionne pas. De plus, dans le code qui m'est donné plus haut, le formulaire n'est pas nommé et ça fonctionne .

Réponse 4 / 5

Rom190686 Messages postés 436 Date d'inscription mardi 29 avril 2008 Statut Membre Dernière intervention 20 novembre 2015 35
16 juil. 2010 à 18:55

Le problème venait de mon navigateur qui gardait en cache mon ancien JS.
Merci

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 505
16 juil. 2010 à 19:24

Utilise la balise "code" de CCM pour conserver la mise en forme de tes codes, ou dépose-le sur un pastebin.

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook

Javascript Arrondi à 2 chiffres après la virgule

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Problème dans page dl-protect.link dans zone telechargement

Quel est le délai de validation sur Le Bon coin?