Validation d'un formulaire complexe Fermé

Question

Bonjour, je suis novice en Javascript et j'ai un problème que je n'arrive pas à résoudre. J'ai un formulaire avec des champs, certains obligatoires et d'autres non, jusque là pas de problème. Le souci c'est que j'ai une checkbox auquel son relié des champs text. Quand elle n'est pas coché, les champs text sont "disable" et quand tu coches la checkbox ils sont "enable" (pour ça pas de prob) Mon problème c'est que quand ils sont "enable" ils doivent devenir obligatoire. Or je n'arrive pas a les mettres obligatoires UNIQUEMENT quand "enable". Quelqu'un sait-il m'aider ? Voici le code html

Objectieve aansprakelijkheid brand en ontploffing (info)

et voici le code Javascript function DoTheCheck4() { if(document.Forms.W20.checked == true) { document.Forms.Adres_20.disabled=false; document.Forms.Adres_20.style.backgroundColor=eC; document.Forms.Huisnr_20.disabled=false; document.Forms.Huisnr_20.style.backgroundColor=eC; document.Forms.Postnr_20.disabled=false; document.Forms.Postnr_20.style.backgroundColor=eC; document.Forms.Gemeente_20.disabled=false; document.Forms.Gemeente_20.style.backgroundColor=eC; } else { document.Forms.Adres_20.disabled=true; document.Forms.Adres_20.value=''; document.Forms.Adres_20.style.backgroundColor=dC; document.Forms.Huisnr_20.disabled=true; document.Forms.Huisnr_20.value=''; document.Forms.Huisnr_20.style.backgroundColor=dC; document.Forms.Postnr_20.disabled=true; document.Forms.Postnr_20.value=''; document.Forms.Postnr_20.style.backgroundColor=dC; document.Forms.Gemeente_20.disabled=true; document.Forms.Gemeente_20.value=''; document.Forms.Gemeente_20.style.backgroundColor=dC;} } Merci de votre aide, c'est urgent !

Adres :
Nr :
Postnr :
Gemeente :

le père · Answer

Goeiedag,

C'est dans le code qui vérifie si les champs sont vides qu'il faut faire quelque chose. Or dans ce que tu montres, je ne vois pas ce qui vérifie si les champs sont remplis ou pas. Tu dois avoir au niveau de la balise FORM un appel à un javascript ou à un script PHP qui fait ce contrôle. Peux-tu le montrer ?

Yasminou · Answer

Oui pour les autres champs j'utilise ça

function Forms_Validator(theForm)
{

  if (theForm.NaamJH.value == "")
  {
    alert("Gelieven het veld \"Naam Jeugdhuis\" in te vullen.");
    theForm.NaamJH.focus();
    return (false);
  }

  if (theForm.NaamJH.value.length > 40)
  {
    alert("Please enter at most 40 characters in the \"Naam Jeugdhuis\" in te vullen.");
    theForm.NaamJH.focus();
    return (false);
  }
return (true);
}

le père · Answer

C'est là qu'il faut (aussi) mettre if(document.Forms.W20.checked ...) pour ne tester que si ton checkbox est coché :

function Forms_Validator(theForm) 
{ 
if(document.Forms.W20.checked == false) return (true); // comme ça on ne fait pas de vérif si les champs sont à ignorer

Yasminou · Answer

Et je peux le mettre n'importe où dans la vérif ?
Ou je dois faire attention à la disposition des champs ?

Yasminou · Answer

Comme ça ??

function Forms_Validator(theForm) 
{ 

if (theForm.NaamJH.value == "") 
{ 
alert("Gelieven het veld \"Naam Jeugdhuis\" in te vullen."); 
theForm.NaamJH.focus(); 
return (false); 
} 

if (theForm.NaamJH.value.length > 40) 
{ 
alert("Please enter at most 40 characters in the \"Naam Jeugdhuis\" in te vullen."); 
theForm.NaamJH.focus(); 
return (false); 
} 
if(document.Forms.W20.checked == false) return (true); 
return (true); 
}

le père · Answer

Il faut le mettre au tout début de la fonction, comme je l'avais mis au message 3.
C'est curieux comme question, ça ne te semble pas logique ?

Yasminou · Answer

pas vraiment ...
Je pensais qu'il fessait la vérif champ par champ dans l'orde... et comme celui lui là se trouve tout en bas du formulaire...

enfin je vais essayer ça .. merci en tout cas.

le père · Answer

Euh.. je comprends ton étonnement...

Je n'avais pas lu assez en détail ton Forms_Validator, je croyais que c'était la validation du formulaire que tu donnes au début, comme je te le demandais à la réponse n°1. Mias je n'en suis plus sûr du tout maintenant. Il faudrait que tu montres la balise FORM du formulaire.

Yasminou · Answer

Bonjour mon père ;-)

Bon bin ça ne fonctionne pas comme cela devrai :-s
Voici ma balise FORM

<form method="post" action="Aanvraag_new.asp" name="Forms" onSubmit="return Forms_Validator(this)" language="JavaScript">

Possible de voir en ligne ce que je veux dire, peut-être plus simple ...

http://web.festinterdio.be/formaat/verzekering_new.asp

Donc si tu coches "Objectieve..." t'es obligés de remplir les champs après, sinon il valide.

le père · Answer

Bonjour

ça va mieux quand on voit ce qui se passe

En fait, petit cachotier, tu ne m'as montré qu'une partie du Forms_Validator au message 2 ! Il y a des tests du même style pour les autres champs, je suppose. sauf les 4 qui sont conditionnés par "Objectieve..."

Il faut donc ajouter le if(document.Forms.W20.checked == false) return (true);  après le test des champs pécédents, puis ajouter des tests pour les nouveaux champs

Yasminou · Answer

Bon ok ça avance ... mais ça ne fonctionne pas correctement.
Quand je ne coche pas "Objectieve...", il valide => OK
Quand je coche il demande de remplire les champs => Nickel MAIS quand je remplis et clicque OK => rien, il m'affiche tj le msg

Tu peux voir ce que ça donne online ....

J'ai mis tout à la fin du Forms_Validator

function Forms_Validator(theForm)
.......

if (theForm.Tel.value == "")
{
alert("Gelieven het veld \"Tel\" in te vullen.");
theForm.Tel.focus();
return (false);
}

if (theForm.Tel.value.length < 12)
{
alert("Vul het veld \"Tel\" in het juiste formaat.");
theForm.Tel.focus();
return (false);
}

var checkOK = "0123456789/.";
var checkStr = theForm.Tel.value;
var allValid = true;
var validGroups = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Gelieven enkel cijfers en \"/\" karakter in het veld \"Tel\" in te vullen.");
theForm.Tel.focus();
return (false);
}
if(theForm.W20.checked == true)
{
alert("Veuillez remplir les champs si desous !");
theForm.W20.focus();
return (false);
}
return (true);
}

Je te met ici aussi la fonction des champs "Objectieve ..."

function DoTheCheck4() {
if(document.Forms.W20.checked == true)
{
document.Forms.Adres_20.disabled=false; document.Forms.Adres_20.style.backgroundColor=eC;
document.Forms.Huisnr_20.disabled=false; document.Forms.Huisnr_20.style.backgroundColor=eC;
document.Forms.Postnr_20.disabled=false; document.Forms.Postnr_20.style.backgroundColor=eC;
document.Forms.Gemeente_20.disabled=false; document.Forms.Gemeente_20.style.backgroundColor=eC;
}
else
{ document.Forms.Adres_20.disabled=true; document.Forms.Adres_20.value=''; document.Forms.Adres_20.style.backgroundColor=dC;
document.Forms.Huisnr_20.disabled=true; document.Forms.Huisnr_20.value=''; document.Forms.Huisnr_20.style.backgroundColor=dC;
document.Forms.Postnr_20.disabled=true; document.Forms.Postnr_20.value=''; document.Forms.Postnr_20.style.backgroundColor=dC;
document.Forms.Gemeente_20.disabled=true; document.Forms.Gemeente_20.value=''; document.Forms.Gemeente_20.style.backgroundColor=dC;}
}

le père · Answer

Quand je coche il demande de remplire les champs => Nickel MAIS quand je remplis et clicque OK => rien, il m'affiche tj le msg 
C'est bien ce que tu lui as demandé ! Regarde ce que tu as écris : Si la case est cochée, alerte !

Il faut :
if(theForm.W20.checked == false) return (true) ; // si la case n'est pas cochée, il n'y a rien d'autre à contrôler
if (theForm.Adres_20.value == "") 
{ 
alert("Gelieven het veld \"Adres\" in te vullen."); 
theForm.Adres_20.focus(); 
return (false); 
} 

if (theForm.Adres_20.value.length > 30)  // s'il y a une longueur limite !
{ 
alert("adresse trop longue"); 
theForm.Adres_20.focus(); 
return (false); 
} 
... etc pour les 3 autres champs, avec des tests adaptés (valeurs numériques, code postaux...)
jusqu'au

return (true); 

quand toutes les barrières ont été franchies

Yasminou · Answer

SUPER genial, ça fonctionne ... merci bcp !

le père · Answer

De rien :-)
A une prochaine fois

Validation d'un formulaire complexe

14 réponses

Discussions similaires