Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

Formvalidering i javascript og php

Forord

Denne artikel handler om formvalidering i både javascript og php samt teorien bag dette. - Version 1,1

Indholdsfortegnelse

1.0   Changelog:
   1.1   Version 1,1
2.0   Hvorfor validere data?
   2.1   Eksempler på hvor det kan være en fordel at validere data
   2.2   Hvorfor validere det samme gange?
3.0   Hvordan gøres det så rent praktisk?
   3.1   Forbered din formular til datavalidering
      3.1.1   HTML
      3.1.2   Javascript
      3.1.3   PHP
   3.2   Valider et tekstfelt - Kontrollér længden på et felt
      3.2.1   I javascript
      3.2.2   I PHP
   3.3   Kontrollér e-mail adresse
      3.3.1   I javascript
      3.3.2   I php
   3.4   Kontrollér om to felters værdi er ens
   3.5   I javascript
   3.6   I PHP
   3.7   Valider Radioknapper
      3.7.1   I javascript
   3.8   Kontrollér en url adresse
      3.8.1   I javascript
      3.8.2   I php
   3.9   Kontroller en checkbox
      3.9.1   I Javascript
      3.9.2   I php
   3.10   Blokker submit knappen
      3.10.1   i Javascript
4.0   Slutord

1.0  Changelog:

1.1  Version 1,1

- Rettet en fejl der resulterede i fejlvalidering når brugeren indtastede en e-mail adresse med store bogstaver.

2.0  Hvorfor validere data?

Det er altid en god idé at validere data så man kan kontrollere at de data som ens brugere sender ind faktisk kan bruges til de formål som de er tænkt til.

2.1  Eksempler på hvor det kan være en fordel at validere data

Kontrollér at en e-mail faktisk er en e-mail og om det er en gyldig e-mail.
Kontrollér om et link er et gyldigt link
Kontrollér om et felt er tomt eller ej.
Kontrollér om man har sat flueben i en checkbox
Kontrollér om man har valgt en radiobutton

2.2  Hvorfor validere det samme gange?

Det giver jo mening at kontrollere data. Men hvorfor så kontrollére det både i Javascript og i PHP og hvad skal man være opmærksom på?

Kontrollen i Javascript komplet af hensyn til brugeren, og den er slet ikke fejlsikker.
Der er nogle brugere der har slået javascript fra i deres browsere, så hvis ens datavalidering er skrevet i ren javascript så kan vi allerede der risikere at der er nogle der kan indsende ukorrekte data til os eller til vores database.

Det kan også være ekstremt frustrerende hvis man sidder på en langsom forbindelse og skal submitte sine data og vente på at siden loader for at få at vide at man bare skal tilbage for at gøre det hele om en gang til.

Det er i hvert fald derfor jeg validerer data både i javascript og i php.

3.0  Hvordan gøres det så rent praktisk?

Herunder kan du se forskellige eksempler på kontrol af datainput.

Det man skal være specielt opmærksom på ved datavalidering både i javascript og i php er at valideringen skal være lige streng. Det kan ikke nytte noget hvis f.eks. javascriptvalideringen skal kontrollere om et inputfelt indeholder 3 tegn hvis man i php vil kontrollere om inputfeltet indeholder tegn og bogstaver. Så inden man udgiver et endeligt script så sørg for at man undgår disse fejl.

3.1  Forbered din formular til datavalidering

I denne artikel vil jeg tage udgangspunkt i en formular jeg har døbt "Opret bruger".

3.1.1  HTML

Denne html formular ser sådan her ud:

  1. <form action="LINK/TIL/PHP_FIL.php" method="post">
  2.     <table border="0" cellspacing="2" cellpadding="3" align="center">
  3.         <tr>
  4.             <td>Brugernavn</td>
  5.             <td><input type="text" name="brugernavn" id="brugernavn" size="24" /><img src="blank.png" id="valBrugernavn"></td>
  6.         </tr>
  7.         <tr>
  8.             <td>Email</td>
  9.             <td><input type="text" name="email" id="email" size="24" /><img src="blank.png" id="valEmail"></td>
  10.         </tr>
  11.         <tr>
  12.             <td>Adgangskode</td>
  13.             <td><input type="password" name="adgangskode" id="adgangskode" size="24" /><img src="blank.png" id="valAdgangskode"></td>
  14.         </tr>
  15.         <tr>
  16.             <td>Gentag adgangskode</td>
  17.             <td><input type="password" name="adgangskode2" id="adgangskode2" size="24" /><img src="blank.png" id="valAdgangskode2"></td>
  18.         </tr>
  19.         <tr>
  20.             <td>Angiv køn</td>
  21.             <td><input type="radio" name="koen" value="mand" id="mand" /><label for="mand">mand</label>&nbsp;<input type="radio" name="koen" value="kvinde" id="kvinde" /><label for="kvinde">kvinde</label><img src="blank.png" id="valKoen"></td>
  22.         </tr>
  23.         <tr>
  24.             <td>Hjemmeside - Valgfri</td>
  25.             <td><input type="text" name="hjemmeside" id="hjemmeside"><img src="blank.png" id="valHjemmeside"></td>
  26.         </tr>
  27.         <tr>
  28.             <td>Jeg har læst og accepteret noget</td>
  29.             <td><input type="checkbox" name="accept" value="1" id="accept" /><img src="blank.png" id="valAccept"></td>
  30.         </tr>
  31.         <tr>
  32.             <td colspan="2" align="center"><input type="submit" name="opretBruger" id="opretBruger" value="Opret bruger" /></td>
  33.         </tr>
  34.     </table>
  35. </form>

Som I kan se så indeholder denne følgende elementer:
- Brugernavn med unikt id
- Blankt billede med et unikt id
- Email med unikt id
- Blankt billede med unikt id
- Adgangskode med unikt id
- Blankt billede med unikt id
- Gentag adgangskode med unikt id
- Blankt billede med unikt id
- Angiv køn radiobuttons med unikke ider
- Blankt billede med unikt id
- Hjemmeside med unikt id og som er valgfri
- Blankt billede med unikt id
- Læs og forstå noget med unikt id
- Blankt billede med unikt id
- Submit knap med unikt id

Dette skal gøres før du kan begynde på feltvalidering:
- Alle felter du vil kontrollere skal have et unikt id tag det samme skal submit knappen, jeg har valgt at give dem samme navn som deres name tag for at gøre det lidt nemmere for mig.
- Denne formvalidering bruger bl.a. billeder for at fortælle brugeren om feltet er i orden eller om der er fejl i det. Så du skal have et billede der hedder blank (der ikke indeholder noget), et billede der hedder ok (f.eks. med et grønt flueben) og et billede der hedder fejl (f.eks. et rødt kryds).
- Dernæst skal du indsætte et blankt billede med et unikt id efter hver input felt. Dette kommer til at fortælle brugeren om der er fejl eller ej. Jeg har lavet de unikke idér i stil med "valBrugernavn" val for validering efterfulgt at det felt som skal kontrolleres.

3.1.2  Javascript


Dernæst skal vi starte på en javascript funktion der skal kontrollere data
Indsæt dette efter </form> tagget:
  1. <script type="text/javascript">
  2.     
  3.     // Funktion til at validere data
  4.     function validerData(){
  5.         
  6.         
  7.         // Hvor ofte skal funktionen genstarte?
  8.         setTimeout('validerData()', 1);
  9.         
  10.     }
  11.     
  12.     // Start funktionen
  13.     validerData();
  14.     
  15. </script>

Lige pt. indeholder funktionen kun et element der fortæller hvor ofte funktionen skal genstarte. Dette gør at vi hele tiden kan holde brugeren opdateret om valideringen er godtaget.

3.1.3  PHP

Dernæst skal du lave en php fil hvor vi skal kontrollere data en gang til.

til at starte med ser den sådan ud:
  1. <?php

  3. // Kontroller data
  4. if()

  6. elseif()

  8. elseif()

  10. elseif()

  12. elseif()

  14. elseif()


  17. // Ellers opret brugeren
  18. else{

  20.  // Her skal du så selv indsætte din kode til at oprette brugeren i dit system.

  22. }

  24. ?>


3.2  Valider et tekstfelt - Kontrollér længden på et felt

Lad os gå i gang med det sjove.

Her kontrollerer vi om værdien i et datafelt er over f.eks. 3 tegn langt.

Mange har den opfattelse at man altid skal kontrollere om et felt indeholder data. Hvis det gør det så vil man kontrollere om feltet f.eks. data er over 3 tegn langt.
I min verden er der ingen grund til dette. Hvis man alligevel vil kontrollere længden af et datafelt så er der ingen grund til at se om feltet er tomt eller ej. Det er efter min mening dobbeltarbejde for en selv.

3.2.1  I javascript

Vi starter med javascriptdelen.

i javascriptfunktionen skal du indsætte følgende
  1. if(document.getElementById('brugernavn').value.length < 3)
  2.     document.getElementById('valBrugernavn').setAttribute('src', 'LINK/TIL/ok-billedet.png');
  3. else
  4.     document.getElementById('valBrugernavn').setAttriibute('src', 'LINK/TIL/fejl-billedet.png');

Hvad gør koden?
HVIS "brugernavn" feltets værdi er over 3 tegn langt så skal vi ændre billedet ("valBrugernavn") til OK-billedet
ELLERS skal vil rette billedet til FEJL-billedet.

Hvad de forskellige elementer præcist gør, vil jeg ikke komme ind på her, det er ikke det som artiklen handler om.

Du kan nu gemme og teste din funktion. Har du gjort det rigtigt så vil det blanke billede rette sig til dit FEJL-billede når du henter siden og når du begynder at skrive i feltet vil billedet rette sig til OK-billedet når du skriver mere end 3 tegn. Sletter du indholdet i feltet igen vil billedet rette sig tilbage til FEJL-billedet.

Wiee!! Men hvorfor starter vi med et blankt billede???
Det er fordi jeg tænker på de folk der ikke har javascript aktiveret, så ser de ikke et rødt kryds eller et grønt flueben når de går ind på siden, de vil jo alligevel ikke få glæde af det... Derfor!

3.2.2  I PHP

Så hopper vi over i dit php dokument.

Her skal du rette
  1. if()

til
  1. if(strlen($_POST[brugernavn]) < 3)
  2.  die('Brugernavnet skal være mindst 3 tegn langt.')

Nu kan du teste dit script igen, prøv at indtaste 2 tegn i brugernavn feltet og klik på Opret Bruger, du får fejlmeddelelsen udskrevet hvis du har gjort det rigtigt.

TILLYKKE! Du er nu godt påvej til at være mester i formvalidering.

3.3  Kontrollér e-mail adresse

Noget der er lidt sværere, kontrollér om en e-mail adresse er gyldig. Igen synes jeg det er en dum idé at kontrollere om et felt er tomt eller ej inden man fortsætter valideringen, så det springer vi over.

3.3.1  I javascript

Vi skal lave en ny funktion i <script></script> delen. Denne skal kontrollére om en e-mail adresse er gyldig eller ej.

indsæt dette før validerData funktionen:
  1. function erGyldigEmail(email){
  2.   
  3.     var RegExp = /^((([A-z]|[0-9]|!|#|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+(\.([A-z]|[0-9]|!|#|$|%|&|'|\*|\+|\-|\/|=|\?|\^|_|`|\{|\||\}|~)+)*)@((((([A-z]|[0-9])([A-z]|[0-9]|\-){0,61}([A-z]|[0-9])\.))*([A-z]|[0-9])([a-z]|[0-9]|\-){0,61}([A-z]|[0-9])\.)[\w]{2,4}|(((([0-9]){1,3}\.){3}([0-9]){1,3}))|(\[((([0-9]){1,3}\.){3}([0-9]){1,3})\])))$/
  4.     
  5.     if(RegExp.test(email))
  6.         return true;
  7.         
  8.     else
  9.         return false;
  10.     
  11. }
Uden at gå for meget i detalier så tester denne funktion variablen email mod reg.exp. feltet. Passer det ind så returnerer den true, ellers false.

i validerData funktionen skal du tilføje dette:
  1. if(erGyldigEmail(document.getElementById('email')))
  2.       document.getElementById('valEmail').setAttribute('src', 'OK-billede.png');
  3. else
  4.       document.getElementById('valEmail').setAttribute('src', 'FEJL-billede.png');

3.3.2  I php

i PHP filen skal du ændre den første
  1. elseif()

til

  1. elseif(!filter_var($_POST[email], FILTER_VALIDATE_EMAIL))
  2.      die('Du har ikke angivet en gyldig e-mail adresse');

Nu kan du teste din kode igen. det blanke billede ud for e-mail feltet skal rettes til FEJL billedet hvis du angiver en ugyldig e-mail adresse, og til OK billedet når du angiver en gyldig e-mail.

Hvis du indtaster en ugyldig e-mail og trykker Opret bruger vil du få en fejlmeddelelse udskrevet.

3.4  Kontrollér om to felters værdi er ens

Så skal vi til at kontrollere om feltet adgangskode er lig med adgangskode2

Her har jeg valgt at vi retter billedet hvis feltet er udfyldt, men i teorien man kan man sætte specielle kriterier op for ens adgangskode som f.eks. at koden skal være mindst 8 tegn langt, og det SKAL indeholde BÅDE talg og bogstaver samt meget andet.

3.5  I javascript

Indsæt følgende i funktionen validerData()

  1. if(document.getElementById('adgangskode').value.length > 0){
  2.      document.getElementById('valAdgangskode').setAttribute('src', 'OK-billede.png');

  4.           if(document.getElementById('adgangskode').value === document.getElementById('adgangskode2').value)
  5.                document.getElementById('valAdgangskode2').setAttribute('src', 'OK-billede.png');
  6.           else
  7.                document.getElementById('valAdgangskode2').setAttribute('src', 'Fejl-billede.png');

  9. }else
  10.      document.getElementById('valAdgangskode').setAttribute('src', 'Fejl-billede.png');
vi kontrollerer først om brugeren har angivet en adgangskode. HVIS man har det, så kontrollerer vi om feltet adgangskode2 er lig med det man har indtastet i adgangskode feltet. Og retter billederne derefter.

3.6  I PHP

I php-filen skal den næste

  1. elseif()

rettes til

  1. elseif($_POST[adgangskode] !== $_POST[adgangskode2])
  2.      die('Der var fejl i gentagelsen af adgangskoden');

Nu kan du teste din kode igen.

3.7  Valider Radioknapper

Egentligt kan man udelade at kontrollere radioknapper hvis man som standard har valgt en af dem (hvilket jeg synes er en god idé), men jeg synes alligevel jeg vil bringe den her.

3.7.1  I javascript

indsæt dette i validerData funktionen

  1. if(document.getElementById('mand').checked || document.getElementById('kvinde').checked)
  2.     document.getElementById('valKoen').setAttribute('src', 'OK-billede.png');
  3. else
  4.     document.getElementById('valKoen').setAttribute('src', 'Fejl-billede.png');

I php
ret den næste
  1. elseif()

til:
  1. elseif(!$_POST[koen])
  2.      die('Du har ikke angivet dit køn');

At teste igen! hvis du har flere radiokapper du vil teste så skal du bare tilføje " || " (mellemrum, 2 lodrette streger, mellemrum) og så en ny document.getElementById('id_her').checked til if sætningen. I php skal du ikke rette noget hvis du giver radioknappen samme navn.

3.8  Kontrollér en url adresse

Her i mit eksempel har jeg valgt at hjemmesidefeltet er valgfrit så derfor skal vi kontrollere om feltet indeholder data. Hvis det ikke gør det, så skal vi ikke rette billedet fra blank, ellers så skal vi kontrollere om adressen er gyldig.

3.8.1  I javascript

Du skal indsætte en helt ny funktion i <script></script> delen.
  1. function erGyldigURL(url){
  2.             
  3.     var RegExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;
  4.     
  5.     if(RegExp.test(url))
  6.         return true;
  7.         
  8.     else
  9.         return false;
  10.     
  11. }

og i validerData funktionen skal du indsætte dette:
  1. if(document.getElementById('hjemmeside').value.length > 0){
  2.      if(erGyldigURL(document.getElementById('hjemmeside')))
  3.           document.getElementById('valHjemmeside').setAttribute('src', 'OK-billede.png');
  4.      else
  5.           document.getElementById('valHjemmeside').setAttribute('src', 'FEJL-billede.png');
  6. }else
  7.      document.getElementById('valHjemmeside').setAttribute('src', 'blank.png');

3.8.2  I php

i php skal den næste
  1. elseif()

rettes til:
  1. elseif(!filter_var($_POST[hjemmeside], FILTER_VALIDATE_URL))
  2.      die('Ugyldig e-mail adresse');

TEST IGEN!

3.9  Kontroller en checkbox

Mange opret bruger formularer kræver at man sætter et flueben i en checkbox for at komme videre. Her vises hvordan:

3.9.1  I Javascript

i validerData funktionen skal du indsætte:
  1. if(document.getElementById('accept').checked)
  2.      document.getElementById('valAccept').setAttribute('src', 'OK-billede.png');
  3. else
  4.      document.getElementById('valAccept').setAttribute('src', 'Fejl-billede.png');

3.9.2  I php

ret den sidste
  1. elseif()

til
  1. elseif(!$_POST[accept])
  2.      die('Du skal læse og acceptere noget!');

TEST ENDNU EN GANG!

Nu er du faktisk færdig med php delen, hvis alt virker som det skal er du faktisk færdig. Dog synes jeg der er en sidste ting vi mangler i javascript delen.

3.10  Blokker submit knappen

Vi kan fortælle brugeren vha. javascript hvis man har indtastet korrekte eller ukorrekte data. Så kan vi da lige så godt forhindre dem i at submitte formen hvis der er noget der ikke er som vi vil have det! Det er er rigtigt at dette kan vi ikke gøre for dem der har slået javascript fra, men det er derfor vi har lavet en php version af valideringen også!

3.10.1  i Javascript


Indsæt dette i validerData funktionen:
  1. if(document.getElementById('brugernavn').value.length > 3 || erGyldigEmail(document.getElementById('email').value) || document.getElementById('adgangskode').value.length > 0 || (document.getElementById('adgangskode').value === document.getElementById('adgangskode2').value) || (document.getElementById('mand').checked || document.getElementById('kvinde').checked) || document.getElementById('accepter').checked)
  2.      document.getElementById('opretBruger').disabled = false;
  3. else
  4.      document.getElementById('opretBruger').disabled = true;

TEST!

4.0  Slutord

TADA! Nu har du en form med validering

Det er korrekt at den sidste del er meget klumpet lavet og bliver meget hurtigt uoverskuelig. Det kan laves bedre på så mange andre måder, men dette er kun for at give et indblik i hvordan formvalidering bliver lavet (ifølge mit hoved)

Håber folk kan bruge dette til noget.

Jeg nævnte tidligere at man selv kan lave sine egne kontroller vha.reg.exp. og til det findes der flere gode guides på nettet og her på rowl.

Men se på erGyldigEmail() og erGyldigURL() funktionerne brugt her i guiden til at se hvordan du sammenblander det med denne validering.

Have fun programming!
Sidst redigeret 19:05 22/04/2009
Oprettet af:
Kaalakiota

Webprogrammering

Point modtaget: 500

Rate:
20:44 18/01/2009

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Okai Det er en nice lang artikel.

Den er god, de er forståelig. Og jeg kan bruge den :D.

9/5 herfra!
Oprettet af:
Olivernoerd
  Mail
17:34 20/01/2009
Den er meget nyttig, især for alverdens programmøre, som ikke tænker over hvor vigtigt det er, kun at få sikre inputs til databasen.

Jeg giver artiklen 5/5!
Sidst redigeret 12:11 21/01/2009
Oprettet af:
_danish_pastry
  Mail
12:10 21/01/2009
Det ser rigtig godt ud.
Kendte ingen gang til funktionen filter_var(), men det var rigtig lærerigt ;)
Oprettet af:
Fiskeren
  Mail
16:07 21/01/2009
Jeg vil gerne sige at jeg har oplevet at javascript funktionen som du bruger, erGyldigEmail ikke har fungeret!!!
Oprettet af:
_danish_pastry
  Mail
23:05 07/02/2009
hvilken mail var det?
Oprettet af:
Kaalakiota
  Mail
22:26 16/03/2009
I den sidste med submit knappe, at den skal blokeres. Der står der er en php af den, men det er der ikke?
Oprettet af:
Storm
  Mail
08:00 22/12/2009
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes