login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Probleem met validatie form

Offline ElSticky - 07/01/2011 17:32
Avatar van ElStickyNieuw lid Hey,

Als project voor school moeten we de validatie van een form maken. Tot hiertoe is dat al vrij goed gelukt adhv een tutorial maar er zit nog een klein foutje in.

Als je op Check Field klikt zal je zien dat de vakjes 1 sec rood worden (omdat er dus niet is ingevuld). De vraag is nu hoe ik het kan fixen dat de vakjes ook effectief rood blijven staan totdat je ze correct invult of opnieuw submit?

Bekijk demo:
http://users.telenet.be/elsticky/win/

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. /**
  2.  * @author Nicholas.Lievens KdG
  3.  */
  4. // Als de lengte van het string element 0 is toon hulpbericht
  5. window.addEventListener("load", function(){
  6. 	var form = document.getElementById('form');
  7. 	form.addEventListener("submit", function(){
  8. 	notEmpty(document.getElementById('req1'), 'Please enter a value');
  9. 	isNumeric(document.getElementById('numbers'), 'Please enter numbers');
  10. 	isAlphabet(document.getElementById('letters'), 'Please enter letters');
  11. 	lengthRestriction(document.getElementById('maxlengte'), '2', '8');
  12. 	madeSelection(document.getElementById('selection'), 'Please make a selection');
  13. 	emailValidator(document.getElementById('emailer'), 'No valid email');
  14. 	}, false);
  15. 	}, false);
  16.  
  17. function notEmpty(elem, helperMsg) {
  18. 	if(elem.value.length == 0){
  19. 		elem.style.backgroundColor = 'red';
  20. 		elem.focus(); // zet focus op deze input
  21. 		return false;
  22. 	}
  23. 	return true
  24. }
  25.  
  26. // Als het string element overeen komt met de reguliere expressie zijn het nummers
  27. function isNumeric(elem, helperMsg){
  28. 	var numericExpression = /^[0-9]+$/;
  29. 	if(elem.value.match(numericExpression)){
  30. 		return true;
  31. 	}
  32. 	else {
  33. 		elem.style.backgroundColor = 'red';
  34. 		elem.focus();
  35. 		return false;
  36. 	}
  37. }
  38.  
  39. // Als het string element overeenkomt met de reguliere expressie zijn het letters
  40. function isAlphabet(elem, helperMsg){
  41. 	var alphaExp = /^[a-zA-Z]+$/;
  42. 	if(elem.value.match(alphaExp)){
  43. 		return true;
  44. 	}
  45. 	else {
  46. 		elem.style.backgroundColor = 'red';
  47. 		elem.focus();
  48. 		return false;
  49. 	}
  50. }
  51.  
  52.  
  53. function lengthRestriction(elem, min, max){
  54. 	var uInput = elem.value.length;
  55. 	if(uInput >= min && uInput <= max){
  56. 		return true;
  57. 	}else{
  58. 		elem.style.backgroundColor = 'red';
  59. 		elem.focus();
  60. 		return false;
  61. 	}
  62. }
  63.  
  64.  
  65. function madeSelection(elem, helperMsg){
  66. 	if(elem.value == "Please Choose"){
  67. 		elem.style.backgroundColor = 'red';
  68. 		elem.focus();
  69. 		return false;
  70. 	}
  71. 	else {
  72. 		return true;
  73. 	}
  74. }
  75.  
  76. function emailValidator(elem, helperMsg){
  77. 	var emailExp =  /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  78. 	if (elem.value.match(emailExp)) {
  79. 		return true;
  80. 	}
  81. 	else{
  82. 		elem.style.backgroundColor = 'red';
  83. 		elem.focus();
  84. 		return false;
  85. 	}
  86. }

2 antwoorden

Gesponsorde links
Offline Stijn - 07/01/2011 17:53
Avatar van Stijn PHP expert Je moet een return plaatsen. bijvoorbeeld:

return notEmpty(..) && isNumeric(...) && ....;

Dit gaat false geven als er één van die validate functies een false teruggeeft. Gevolg: je formulier wordt niet verstuurd.
Offline ElSticky - 18/01/2011 13:25
Avatar van ElSticky Nieuw lid Sorry voor laatste reactie, het was inmiddels anders opgelost met een preventDefault op een functie toe te passen toch bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.221s