Résolu Javascript : mon alerte ne se lance pas quand le formulaire n'est pas

steeff · 24 Avril 2011

Bonjour,

J'ai un problème avec ma fonction de vérification de formulaire, qui ne se lance pas quand le formulaire est incomplet. En fait aucune alerte n'apparait quand on rempli pas les champs.

Il me manque surement quelque chose, mais je n'arrive pas à trouver quoi.... J'espere vraiment que vous pourrez m'aider.

Voici mon code actuel :

PARTIE FONCTION :

<script type="text/javascript">

// Traitement de l'insertion d'un message avec vérification des champs
//----------------------------------------------------------

// Fonctions de vérification

function Vide($Element)
{
return trim($Element) == "";
}

function is_alpha(Element)
{
pattern = /^[a-zA-Z'éèêëàâäùüûôöîïç]{1}[a-zA-Z'éèêëàâäùüûôöîïç, -]+[a-zA-Z'éèêëàâäùüûôöîïç]{1}$/
return pattern.test(Element.value)
}

function verifForm(form)
{
var msg = 'Merci bien de vouloir renseigner les champs suivants :\n';
var valide = true;
with (document) {
if (Vide(getElementById('nom')) || !is_alpha(getElementById('nom'))) {
getElementById('Lnom').className = 'erreur';
msg += '\t- le nom\n';
valide = false;
}
else {
getElementById('Lnom').className = '';
}
if (getElementById('prenom').value == '' || !is_alpha(getElementById('nom'))) {
getElementById('Lprenom').className = 'erreur';
msg += '\t- le prénom\n';
valide = false;
}
else {
getElementById('Lprenom').className = '';
}

msg += 'Les champs mals renseignés apparaissent en rouge\n';
}
if (!valide) {
alert(msg);
}
return valide;
}

</script>
</head>

<body>

PARTIE FORMULAIRE :

<form onsubmit="return verifForm(this);" method="post" action="formulaire_post.php"> 
<fieldset> 
<legend>EXPRIMEZ-VOUS !</legend> 
<p>
<label for="nom" id="Lnom">Nom :</label>
<input type="text" name="nom" id="nom" value="" />
</p>
<p>
<label for="prenom" id="Lprenom">Prénom :</label>
<input type="text" name="prenom" id="prenom" value="" />
</p>
<p>
<label for="adresse"id="Ladresse">Adresse :</label>
<textarea name="adresse" id="adresse"></textarea>
</p>
<p>
<label for="ville" id="Lville">Ville :</label>
<input type="text" name="ville" id="ville"/>
</p>
<p>
<label for="pays" id="Lpays">Pays / Province :</label>
<input type="text" name="pays" id="pays" value="" />
</p>
<p>
<label for="email" id="Lemail">email :</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="message" id="Lmessage">Votre message :</label>
<textarea name="message" id="message" rows="10" cols="50"></textarea>
</p>

</fieldset>
<p id="action"><input type="submit" name="action" value="Envoyer" /></p>
</form>

</body>
</html>

steeff · 24 Avril 2011

Excusez moi, c'est un peu dur à lire comme ça..
Je le réécris de façon plu lisible

PARTIE FORMULAIRE :
[cpp]
<form onsubmit="return verifForm(this);" method="post" action="formulaire_post.php">
<fieldset>
<legend>EXPRIMEZ-VOUS !</legend>
<p>
<label for="nom" id="Lnom">Nom :</label>
<input type="text" name="nom" id="nom" value="" />
</p>
<p>
<label for="prenom" id="Lprenom">Prénom :</label>
<input type="text" name="prenom" id="prenom" value="" />
</p>
<p>
<label for="adresse"id="Ladresse">Adresse :</label>
<textarea name="adresse" id="adresse"></textarea>
</p>
<p>
<label for="ville" id="Lville">Ville :</label>
<input type="text" name="ville" id="ville"/>
</p>
<p>
<label for="pays" id="Lpays">Pays / Province :</label>
<input type="text" name="pays" id="pays" value="" />
</p>
<p>
<label for="email" id="Lemail">email :</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="message" id="Lmessage">Votre message :</label>
<textarea name="message" id="message" rows="10" cols="50"></textarea>
</p>

</fieldset>
<p id="action"><input type="submit" name="action" value="Envoyer" /></p>
</form>
[/cpp]

PARTIE FONCTION :

[cpp]
// Traitement de l'insertion d'un message avec vérification des champs //----------------------------------------------------------

// Fonctions de vérification
function Vide($Element)
{
return trim($Element) == "";
}

function is_alpha(Element)
{
pattern = /^[a-zA-Z'éèêëàâäùüûôöîïç]{1}[a-zA-Z'éèêëàâäùüûôöîïç, -]+[a-zA-Z'éèêëàâäùüûôöîïç]{1}$/
return pattern.test(Element.value)
}

function verifForm(form)
{
var msg = 'Merci bien de vouloir renseigner les champs suivants :\n';
var valide = true;
with (document) {
if (Vide(getElementById('nom')) || !is_alpha(getElementById('nom'))) {
getElementById('Lnom').className = 'erreur';
msg += '\t- le nom\n';
valide = false;
}
else {
getElementById('Lnom').className = '';
}
if (getElementById('prenom').value == '' || !is_alpha(getElementById('nom'))) {
getElementById('Lprenom').className = 'erreur';
msg += '\t- le prénom\n';
valide = false;
}
else {
getElementById('Lprenom').className = '';
}
msg += 'Les champs mals renseignés apparaissent en rouge\n';
}
if (!valide) {
alert(msg);
}
return valide;
}

[/cpp]

Voila, je pense que c'est mieux comme ça

J'espere que vous pourrez m'aider.
Je vous remercie d'avance.

sphynxounet · 24 Avril 2011

Essaye de rajouter l'évènement onclick sur ton boutton :
[cpp]<input type="submit" name="action" value="Envoyer" onClick="verifForm" >[/cpp]

steeff · 24 Avril 2011

Ok, suite à ton message je viens de tester, mais ça ne fonctionne toujours pas

steeff · 25 Avril 2011

Petit souci :

J'ai bien avancé, en vérifiant petit à petit que ça fonctionne. J'ai augmenté le nombre de champs, et le bon message s'affiche selon les champs manquants. Avec ce code-ci :

[cpp]
function verifForm(form)
{
var msg = 'blabla';
var valide = true;
with (document) {
if (!is_alpha(getElementById('nom')) || Vide(getElementById('nom'))) {
msg += 'le nom, ';
valide = false;
}
if (!is_alpha(getElementById('prenom')) || Vide(getElementById('prenom'))) {
msg += ' le prenom, ';
valide = false;
}
if (!is_alpha(getElementById('email')) || Vide(getElementById('email'))) {
msg += 'l\'email, ';
valide = false;
}

/* if (!VerifMail(getElementById('email'))) {
msg += 'email inccorect. \n';
valide = false;
}
*/

if (!valide) {
alert(msg);
}
else {
alert('ok');
}
return valide;
}
}

[/cpp]

Mais quand j'ajoute ce que j'ai mis entre /* et */, il n'y a plus aucun message d'alerte.
Je ne comprend pas pourquoi cela empêche les messages de s'afficher, car ce n'est qu'un "if", une condition qui n'empêche pas de réaliser les instructions qui suivent en ayant bien refermer l'accolade...

Voici la fonction VerifMail :

[cpp]

function VerifMail(form)
{
getElementById('email')
var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
if(reg.test(mailteste))
{
return(true);
}
else
{
return(false);
}
}

[/cpp]

Je vous remercie d'avance pour votre aide.

sphynxounet · 25 Avril 2011

Elle vient d'où ta variable "mailteste" ? Parce que tu testes ta regex dessus mais dans le code que tu viens de mettre on la voit pas.

steeff · 28 Avril 2011

Oui, le problème était bien là !
Maintenant ça fonctionne correctement, merci sphynxounet

steeff · 8 Mai 2011

Meilleure réponse sélectionnée par steeff.