Validatie probleem

[johanmeer]

Goedemorgen!

Ik zit met een klein probleempje... Ik heb een onwijs groot formulier wat redelijk goed loopt en ingevuld wordt. Het is opgebouwd uit divs met visibility:hidden. En wordt dat getriggerd door een button in combinatie met onderstaande code. Echter wil ik in iedere div een validatie toevoegen, dat als men naar de volgende stap gaat, de velden uit de hudige stap op zn minst ingevuld dienen te zijn.

Rara,,,, wie kan mij helpen?

       <script type="text/JavaScript"    Language="JavaScript">
         function show(step) {
            switch(step) {
             case 1:
			      document.getElementById('step1').style.display = 'block';
                  document.getElementById('step2').style.visibility ="hidden";
                  document.getElementById('step3').style.display = 'none';
				  document.getElementById('step4').style.display = 'none';
				  document.getElementById('step5').style.display = 'none';
				  document.getElementById('step6').style.display = 'none';
                  break;
			 
			 
			   case 2 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.visibility = "visible";
                  document.getElementById('step3').style.display = 'none';
				  document.getElementById('step4').style.display = 'none';
				  document.getElementById('step5').style.display = 'none';
				  document.getElementById('step6').style.display = 'none';
                  break;
               case 3 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'none';
                  document.getElementById('step3').style.display = 'block';
				  document.getElementById('step4').style.display = 'none';
				  document.getElementById('step5').style.display = 'none';
				  document.getElementById('step6').style.display = 'none';
                  break;
			    case 4 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'none';
                  document.getElementById('step3').style.display = 'none';
				  document.getElementById('step4').style.display = 'block';
				  document.getElementById('step5').style.display = 'none';
				  document.getElementById('step6').style.display = 'none';
                  break;
				   case 5 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'none';
                  document.getElementById('step3').style.display = 'none';
				  document.getElementById('step4').style.display = 'none';
				  document.getElementById('step5').style.display = 'block';
				  document.getElementById('step6').style.display = 'none';
                  break;
				   case 6 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'none';
                  document.getElementById('step3').style.display = 'none';
				  document.getElementById('step4').style.display = 'none';
				  document.getElementById('step5').style.display = 'none';
				  document.getElementById('step6').style.display = 'block';
                  break; 	  
				  
             
            }
         }
      </script>

 

[csshunter]

Hoi johanmeer,
Dacht door de titel eerst dat het om html-validatie zou gaan, maar is dus javascript-validatie van een formulier-invulling.

• Misschien iets in deze geest: stap-voor-stap.htm

Met als opmerkingen:

• Hier moet dus de form-afhandeling nog bij komen.
• Het is javascript (clientside), en met uitzetten van javascript kan men de controle omzeilen > dus niet waterdicht.
• Het is eigenlijk alleen een invulhulp: de echte validatie van de ingevulde gegevens moet alsnog serverside (met php) gebeuren, al was het maar om spam en virustoestanden op je server te vermijden (wegens invullen "kwaadaardige gegevens").
• Voor de toegankelijkheid voor bezoekers die zonder javascript surfen (die met een pure tekstbrowser werken of javascript hebben uitgezet) zijn wat maatregelen genomen.
  Als javascript uit staat, worden alle stappen wel meteen getoond (want de onclick-functies werken dan niet), en tevens worden de dan loze links "volgende stap / vorige stap" niet getoond.
  Staat javascript aan, dan geen volgende stappen, maar wel de links om naar de volgende of vorige te gaan. Dat zit in een functie stepStart(), die vanzelf in werking treedt bij opening van de pagina.
• De optie om terug te kunnen lijkt me wel sympathiek, anders kan je achteraf nooit iets checken of herstellen zonder alles opnieuw in te moeten tikken (hangt ook van de browser af: sommige wissen ook alles bij een refresh, andere alleen bij een reload van de pagina).
• Gaat men (als javascript aan staat) terug, en zou men een al ingevuld vak leeghalen, dan moet men weer door de controle om bij de Verzenden-knop te kunnen komen.
• Dus altijd prijs.
• Zie verder de broncode.

Met vriendelijke groet,
CSShunter
__________
PS: het mixen van {visibility: hidden} en {display: block} lijkt me niet echt te werken.