Registreren

[Theo]

Inleiding
Er zijn vele manieren om een form te valideren. Je kunt het met PHP doen, maar ook met Javascript. Het grote voordeel van Javascript is dat we de pagina niet hoeven te (her)laden om een actie uit te voeren. Bij PHP is dat wel het geval.

Op deze pagina vinden we een script om een formulier te valideren met behulp van Javascript. Het script is voorzien van uitleg.


Script
Onderstaande Javascript plaatsen we in de head sectie van onze pagina.

Javascript

Code: Alles selecteren

<script language="javascript" type="text/javascript">
//////////////////////////////////
// VALIDATIE SCRIPT
// © MasterCode webteam 2005 [http://www.mastercode.nl]
// Please leave copyright intact as credits for this script
//////////////////////////////////
function check(formulier)
{
   if (formulier.naam.value=="")
   {
      alert("Vul uw naam in.");
      return false;
   }
   else if (formulier.bericht.value=="")
   {
      alert("Typ een bericht.");
      return false;
   }
}
</script>

Nu gaan we het script stap voor stap bekijken. Op de eerste regel geven we aan dat we bezig zijn met een Javascript. Op de tweede regel introduceren we de functie check. Tussen haakjes zetten we de variabele formulier. Als we verder in het script kijken zien we de variabele nog een aantal keer terugkomen.

Vervolgens beginnen we met het controleren van de onderdelen aan de hand van een if...elseif statement. Wanneer we letterlijk 3e t/m 6e regel gaan lezen lezen we dit: Wanneer (if) de waarde (value) van naam van formulier leeg ("") is, geef dan de melding (alert) "Vul uw naam in." en ga terug met de waarde fout (false). Vervolgens doen we hetzelfde voor het onderdeel bericht.


Het formulier
Hieronder staat de code voor een vrij eenvoudig formulier.

HTML

Code: Alles selecteren

<form id="formulier" onSubmit="return check(this)" action="formulier.php">
   <input type="text" id="naam" name="naam" />
   <textarea id="bericht" name="bericht" />
   <input type="submit" id="knop" value="Valideer" />
</form>

Laten we het formulier nader bekijken. We beginnen bij regel 2 en 3. Op deze regels zien we een input en textarea. Beiden geven we zowel een name als id. Vervolgens kijken we naar de 1e regel. Op de eerste regel openen we het formulier. We geven aan dat de actie (bestemming na verzenden) van het formulier naar formulier.php is. Verder zien we het onSubmit attribuut. Hierin roepen we de functie check aan. Tussen haakjes geven we aan wat er gecheckt moet worden. In dit geval moeten we dus this (het formulier) checken.


Uitleg
We hebben nu zowel het javascript als de code voor het formulier. Ook hebben we ze goed bekeken. Het enige wat we nog missen is het verband tussen beiden. Dat gaan we nu bekijken.

De verbinding tussen beiden wordt gelegd wanneer we het formulier willen versturen (submitten). Het attribuut onSubmit zorgt dat wanneer het formulier gesubmit wordt datgene wat tussen de aanhalingstekens staat uitgevoerd wordt. We zien dat de functie check wordt aangeroepen met als variabele this.

Nu wordt het javascript dus uitgevoerd. De variabele formulier wordt nu vervangen door this. Wat we dus lezen is: if (this.naam.value==""). Nu wordt er dus gekeken of de velden zijn ingevuld of niet. Is dat niet het geval dan krijgen we een melding (alert) en returned het javascript ons naar het formulier met de waarde false, waardoor het formulier niet verstuurt (submit) wordt. Is alles ingevuld dan is de return niet false en wordt het formulier verzonden.


Voorbeeld
Klik hier om een werkend voorbeeld te zien.


Script uitbreiden
Uiteraard kunnen we het script uitbreiden. Zo kunnen we bijvoorbeeld aangeven dat we de naam uit minimaal 4 karakters moet bestaan. Om dit te realiseren moeten we het javascript aanpassen.

Javascript

Code: Alles selecteren

<script language="javascript" type="text/javascript">
//////////////////////////////////
// VALIDATIE SCRIPT
// © MasterCode webteam 2005 [http://www.mastercode.nl]
// Please leave copyright intact as credits for this script
//////////////////////////////////
function check(formulier)
{
   if (formulier.naam.value=="")
   {
      alert("Vul uw naam in.");
      return false;
   }
   else if (formulier.naam.value.length<4)
   {
      alert("Uw naam moet uit minimaal 4 karakters bestaan.");
      return false;
   }
   else if (formulier.bericht.value=="")
   {
      alert("Typ een bericht.");
      return false;
   }
}
</script>

Zo hebben we de mogelijkheid om het script geheel naar wens uit te breiden.

Klik hier voor een voorbeeld.

[nickols]

Leuk en simpel scriptje! Zeker voor een javascript beginner zoals mij.
Nu zit ik alleen met een paar vraagjes, namelijk:

- Hoe kan ik alle foutmeldingen in één popup krijgen?
- Hoe kan ik een foutmelding weergeven als er alleen cijfers in een veld mogen komen (bijv. postcode)?
- Hoe kan ik een e-mail adres valideren?

Mvg, Nicky

[Baby Ghost]

Leuk en simpel scriptje! Zeker voor een javascript beginner zoals mij.
Nu zit ik alleen met een paar vraagjes, namelijk:

- Hoe kan ik alle foutmeldingen in één popup krijgen? [1]
- Hoe kan ik een foutmelding weergeven als er alleen cijfers in een veld mogen komen (bijv. postcode)? [2]
- Hoe kan ik een e-mail adres valideren? [3]

Mvg, Nicky

[1] Hiervoor kan ik 2 manieren bedanken, de 1 mooier dan de ander

De eerste is:
Je kan de waarde van een variable elke keer vergroten door += te gebruiken.
Voorbeeld:

Code: Alles selecteren

var jeVariable = "inhoud";
jeVariable += "meertekst";
//resultaat: inhoudmeertekst

Als je daarmee speelt kan je vast wel wat bedenken

En de mooie is:
Je zet alle foutmeldingen in een javascript array en dan gebruik je Join() om het om te zetten naar tekst.
link: Join()

[2] Ten eerste moet je je afvragen, heeft een postcode alleen cijfers? want wat ik kan herinneren is dat het in de format 1234 AB is. Maar wil je alleen cijfers dan kan je kijken naar de isNan() function.
link: isNan()

[3] Hier zal je regex voor moeten gebruiken. Helaas ben ik geen regex-expert dus kan ik je hier niet ver mee helpen. Wel kan ik je doorsturen naar artikelen-php-f32/email-formulier-t1308.html en daar kan je zien dat Theo de volgende gebruikt:

Code: Alles selecteren

/^[A-Za-z0-9._-]+@[A-Za-z0-9._-]+\.[A-Za-z]{2,6}$/

[Mauz]

Ik wil nog even heel duidelijk benadrukken dat je niet alleen aan de client side form validatie te doen. Daar is namelijk (heel!) gemakkelijk om heen te zeilen en zal daarnaast niet werken wanneer JavaScript uit staat.

[Baby Ghost]

Ik wil nog even heel duidelijk benadrukken dat je niet alleen aan de client side form validatie te doen. Daar is namelijk (heel!) gemakkelijk om heen te zeilen en zal daarnaast niet werken wanneer JavaScript uit staat.

Inderdaad, dit moet op meerdere lagen gedaan worden. Beste is, js(client-side) voor gebruiksgemak, php(server-side) als beveiliging, sql(server-side) als beveiliging. Gewoon overal checken