Multidesk.be » Forums » Webdevelopment & -scripting » Eenvoudige Javascript formuliervalidatie (gesloten)

Helpinformatie
Dit onderwerp werd gesloten.
Het is bijgevolg niet mogelijk er nog op te reageren.
  • Pagina
  • 1 van 1
  • RSS
  • Eerste ongelezen reactie
  • Plaats een reactie
  • Abonneer mij
  • Onderwerp sluiten
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Ezio op donderdag 14 mei 2015 om 17:30:22.
Ezio's avatar
Multiviteit: 973
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
Hey,

Ik wil bij wijze van test een eenvoudig formulier valideren met behulp van Javascript. Als er een waarde is ingevuld in het tekstvak 'name' mag het formulier verzonden worden. In het andere geval mag er geen submit gebeuren.

CODE
  1. <body>
  2.  
  3. <form id="formulier">
  4.     <input type="text" id="txtName" />
  5.     <input type="submit" name="btnSubmit" value="Submit" />
  6. </form>
  7.  
  8. <span id="errormsg"></span>
  9.  
  10.         <script>
  11.                 function checkForm() {
  12.   //Waarde van tekstvak ophalen
  13.     var name = document.getElementById("txtName").value;
  14.   //Waarde van span in variabele steken voor later gebruik
  15.     var errormsg = document.getElementById("errormsg").innerHTML;
  16.    
  17.  //We checken of de gebruik een waarde heeft getypt in het veld 'name'
  18.     if(name == "") {
  19.         //Het veld is leeg -> geef foutboodschap
  20.         errormsg = "Please enter your name";
  21.         //False returnen zodat het formulier niet verzonden wordt
  22.         return false;
  23.     } else {
  24.         //Er werd een waarde ingevuld -> geen foutboodschap
  25.         errormsg = "";
  26.         //Het formulier mag verzonden worden
  27.         return true;
  28.        
  29.     }
  30. }
  31.  
  32. document.getElementById("formulier").addEventListener('click',function() {return checkForm()},false);
  33.     </script>
  34.    
  35. </body>


Het formulier lijkt echter altijd verzonden te worden, ik krijg geen foutboodschap. In bijlage het HTML-bestandje.

Alvast bedankt! :D
Bijlage: b6d1b68813a797404ade00ea4cd546d6.rar
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #1 geschreven door thekid op donderdag 14 mei 2015 om 20:21:57.
thekid's avatar
Multiviteit: 5273
Moderator
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
gewoon het volgende ervan maken

CODE
  1. <form id="formulier" onsubmit="return checkForm();">
  2. ....
  3. </form>


de veranderingen kan je hier bekijken: http://jsfiddle.net/Icepickle/7a867b0r/

de andere manier is gebruik maken van html5 validatie
CODE
  1. <form id="formulier">
  2.     <input type="text" required="required" id="txtName" />
  3.     <input type="submit" name="btnSubmit" value="Submit" />
  4. </form>


En dat kan je hier testen: http://jsfiddle.net/Icepickle/cudanmtx/

dan heb je zelfs geen javascript nodig
Deze tekst werd het laatst bewerkt voor 8.33 % door thekid op donderdag 14 mei 2015 om 20:30:08.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door Ezio op donderdag 14 mei 2015 om 21:06:49.
Ezio's avatar
Multiviteit: 973
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
Bedankt, erg leerrijk!

Nog een paar bijkomende vraagjes:
- Is er een reden waarom je de innerHTML van de span errormsg pas op het einde aanpast terwjil ik dit rechtstreeks in de if-clause deed?
- Met if(variableName){} kan je dus meteen opvragen of het veld geen lege value heeft?
- Is er een verschil tussen null en "" om te controleren of een veld leeg is?
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #3 geschreven door thekid op donderdag 14 mei 2015 om 23:40:31.
thekid's avatar
Multiviteit: 5273
Moderator
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
Wel ja, wat jij deed was eigenlijk een string waarde nemen, en dan die waarde veranderen, daardoor verandert de innerHTML echter niet ;)

Een string is nl een Immutable Object, dit wil zeggen, eenmaal toegewezen, kan het niet meer veranderd worden, in uw geval verander je gewoon de errormsg string, maar niet de innerHTML van je html element (er is geen verbinding meer met dit object). Dus daarmee staat het op het einde ;)

Er is nog een andere reden, en dat is dan voornl naar optimalisatie gezien, nl, in javascript is het niet aangeraden om om verschillende plaatsen uit een functie te springen, alhoewel de taal het kan, kan het niet meer geoptimaliseert worden door de javascript engine, je kan hier zo een klein dom testje vinden die toont hoeveel performantie het kost (het is niet veel maar dit komt omdat ik nu enkel true false terug geef, eigenlijk moet je ervoor zorgen dat je functies slechts 1 point of exit hebben en steeds hetzelfde datatype terug geven)

http://jsfiddle.net/Icepickle/39u9rd09/


if (variableName) is de shorthand manier om te kijken if (variableName == true). In javascript word alles die geen null of "" of false is, sowieso als true geevalueert.

Normaal gezien zal je inderdaad altijd een lege string krijgen, maar daarmee dek je null niet af, dus het kan niet leeg zijn maar toch null, daarvoor is de kortere versie iets eenvoudiger, dekt direct alles af ;)
Deze tekst werd het laatst bewerkt voor 25.3 % door thekid op vrijdag 15 mei 2015 om 00:09:34.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #4 geschreven door Ezio op donderdag 14 mei 2015 om 23:48:36.
Ezio's avatar
Multiviteit: 973
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
Aaaah tuurlijk, ik heb de variabele enkel in 'het geheugen' aangepast en dan niet niet meer 'ge-output'.

Verder, ik scheid liever mijn Javascript en HTML af en gebruik daarvoor bij voorkeur addEventListener(...). Is dit simpelweg niet mogelijk bij een formulier? Ik zou ook nog document.getElementById("frmContact").onsubmit = function() {...}; kunnen gebruiken als tweede keuze, maar liever addEventListener om ook wat consistent te blijven in de JS-code zelf :)

Hier gaat met addEventListener bijvoorbeeld weer meteen de pagina verversen: http://codepen.io/ThibaultG4U/pen/mJPaVL
Deze tekst werd het laatst bewerkt voor 11.28 % door Ezio op vrijdag 15 mei 2015 om 00:03:29.
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #5 geschreven door thekid op vrijdag 15 mei 2015 om 00:13:24.
thekid's avatar
Multiviteit: 5273
Moderator
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
addEventListener is een prima idee, maar het moet dan wel submit zijn en niet click ;)

en dan kan je het zo schrijven

CODE
  1. document.getElementById("formulier").addEventListener('submit',function(e) {
  2.   if (!checkForm())
  3.   {
  4.     e.preventDefault();
  5.   }
  6. },false);


de e.preventDefault() zorgt ervoor dat de default actie niet doorgevoerd word, is nog iets anders ;)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #6 geschreven door Ezio op vrijdag 15 mei 2015 om 00:19:41.
Ezio's avatar
Multiviteit: 973
  • Bewerken
  • Citeren
  • Reageren
  • Verwijderen
  • Waarschuw een crewlid
Super! Nu werkt het idd wel :D

Enorm bedankt!

Opmerking van de crew

Bon, zoals gevraagd, een slotje
thekid
I'm a gamer because I don't have a life... I've chosen to have many
  • Pagina
  • 1 van 1
  • RSS
  • Eerste ongelezen reactie
  • Plaats een reactie
  • Abonneer mij
  • Onderwerp sluiten