Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

Zend Framework en jQuery formuliervalidering

2 dec 2008•

Hoewel ik voldoende vertrouwd ben met php en javascript, voel ik me in de eerste plaats een ontwerper. Dat is ongetwijfeld de reden waarom ik zo hou van frameworks want als ik toch de programmeerkant opga dan laten ze me toe om snel robuuste code te schrijven. Sinds enkele maanden ben ik voor een klant intensief bezig met het Zend Framework voor php en jQuery voor javascript.

Het project waaraan ik werk maakt uitvoerig gebruik van HTML-formulieren (via Zend_Form) en dus is het valideren van de gegevens die een eindgebruiker invult een noodzaak. Een voorbeeldje van formuliervalidering vind je hieronder. Als de gebruiker op de ‘Aanmelden’ knop klikt zonder een paswoord in te vullen, dan wordt het formulier niet verzonden maar verschijnt er een boodschap op het scherm. Het paswoordveld is immers verplicht in te vullen.

een loginscherm met een valideringsmelding

Het Zend Framework zorgt voor goede validering aan de serverkant, maar ik twijfelde over hoe ik de validering zou aanpakken aan de clientkant.

Javascript en php

De meest voor de hand liggende oplossing is natuurlijk het schrijven van javascriptfuncties die de formuliervalidering aan de clientkant voor hun rekening nemen. Maar ik hou er niet van om twee keer code te schrijven met hetzelfde einddoel: één keer in php en één keer in javascript. In een project dat in de maanden na lancering ongetwijfeld nog heel wat aanpassingen zal ondergaan lijkt het me niet aangewezen om telkens zowel de php-code als de javascriptcode te moeten wijzigen wanneer er iets verandert aan een formulier.

Laat Zend_Form de validering maar doen!

Ik heb er dan maar voor gekozen om alles wat betreft formuliervalidering te laten afhandelen door het Zend Framework. Dankzij een jQuery ajax oproep naar de Zend_Form isValidPartial() functie ben ik toch in staat om een gebruiksvriendelijke en snelle validering per formulierveld op het scherm van de gebruiker te tonen.

In de indexAction() van mijn controller regelt het onderstaande stukje code de server-side validering. Niets nieuws voor wie ooit al eens Zend_Form heeft gebruikt. De isValid() functie checkt de input en geeft een foutmelding weer op het scherm van de gebruiker als die ongeldige gegevens in het formulier heeft ingebracht. Pas wanneer alle input geldig is wordt het formulier echt verzonden en de database geüpdatet.

if($this->_request->isPost()) {
  $formData = $this->_request->getPost();
  if($form->isValid($formData)) {
    //update database
  } else {
    $form->populate($formData);
  }
} 

Het nadeel van bovenstaande code is dat de validering pas gebeurt nadat het formulier wordt verzonden. De gebruiker moet dus wachten op een paginavernieuwing alvorens te weten of zijn ingevulde gegevens geldig of ongeldig waren. ‘So nineties!’, hoor ik je roepen. Dat komt inderdaad niet overeen met de snelle responstijd die een gebruiker vandaag verwacht van een webapplicatie.

jQuery to the rescue!

jQuery zal er voor zorgen dat de ingevulde gegevens van elk veld gevalideerd worden op de server net na het invullen van het veld via een Ajax oproep. Zo weet de gebruiker meteen of het veld goed ingevuld is of niet, en dat zonder te moeten wachten op een paginavernieuwing.

jQuery roept daarvoor telkens een tweede action aan in mijn Zend Framework controller. Ik heb die validateformpartial genoemd:

public function validateformpartialAction() {
  if($this->_request->isPost()) {
    $formData = $this->_request->getPost();
    if($form->isValidPartial($formData)) {
      //update database
      $this->view->result = true;
    } else {
      //geeft foutief ingevulde velden weer met hun foutmelding
      $this->view->messages = $form->getMessages(); 
      $this->view->result = false;
    }
  }
} 

Het verschil zit in de aangeroepen functie: isValidPartial() laat toe om enkel het doorgegeven stukje formdata te valideren. Heb je dus een formulier dat uit 5 velden bestaat en je wil maar 1 veld valideren dan kan dat via isValidPartial(). getMessages() geeft de fouten weer per veld. (Meer informatie over getMessages vind je in de Zend Framework handleiding.)

Belangrijk is wel dat je via je javascript functie enkel json (of xml) terugkrijgt van die Zend Framework action. Je moet dus Zend_Layout en Zend_View uitschakelen voor die ene action. Dat kan makkelijk in de initAction() van je controller dankzij de AjaxContext helper:

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('validateformpartial','json')->initContext(); 

Alles wat je in de validateformpartialAction() als variabele aan de view meegeeft (via $this->view->variableName) wordt dan meteen door die functie als json geretourneerd. Dat maakt het makkelijk om die variabelen in jQuery op te vangen en er iets mee te doen. Zo kan je bijvoorbeeld via jQuery per veld tonen welke fout de gebruiker gemaakt heeft tijdens het invullen van het formulier.

Ter vervollediging is hier de jQuery ajax functie die de waarde van het ingevulde formulierveld doorstuurt naar de validateformpartialAction van daarnet uit de Zend Framework controller:

$.ajax({
  type: "POST",
  //dataString is een string in dit formaat: &naam=johnny&beroep=bouwvakker
  //je geeft dus de value van alle ingevulde formuliervelden die je wil valideren mee
  data: $dataString,
  //baseUrl bevat het pad naar je webapplicatie
  url: baseUrl + "/controllernaam/validateformpartial",
  dataType: "json",
  //showSpinner toont een grafisch element dat de gebruiker er op wijst dat er iets aan het gebeuren is
  beforeSend: function(){ showSpinner(); }, 
  //handleResponse verwerkt de teruggekregen json data en toont de gebruiker het resultaat van de validering
  //hideSpinner() verbergt het grafische element
  success: function(json){ handleResponse(json); hideSpinner(); }, 
}); 

That’s it. Door de vele requests naar de server is het misschien niet de meest aangewezen manier om formuliervalidering te doen voor grootschalige webapplicaties, maar voor het project waar ik aan werk is het zeker voldoende. Het systeem zal zelfs op hoogdagen nooit door meer dan 100 gebruikers tegelijk gebruikt worden.

Het grote voordeel is dat de formvalidering overgelaten wordt aan Zend_Form. Eén regeltje wijzigen in je Form class is dus voldoende om zowel je formulier, de ajaxvalidering als de php validering up-to-date te brengen. Geen dubbel javascript valideringswerk dus. Het maakt mijn applicatie een stuk makkelijker te onderhouden.

Categorieën: Ontwikkeling, jQuery, PHP, Zend Framework,

 

Gelijkaardige blog posts

1 reacties op dit bericht

1
Christine Fürst schreef op 19 jun 2009 om 15u48:

Thanks for this article, Thomas! Easy to understand. Good reading. Cheers, Stinie


Plaats een reactie

Reageren is niet mogelijk op dit bericht.
 


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving