vrijdag 8 mei 2009

Forms controleren met JQuery


JQuery maakt het gebruik van Javascript in websites eenvoudiger met een kleine core library die is uit te breiden met plugins. Deze plugins zijn beschikbaar voor haast alles wat je mogelijk zou willen doen. Zo ook voor het valideren van formulieren. Hiervoor zijn meerdere plugins beschikbaar maar de beste is toch wel de "validation" plugin. Met deze plugin is het mogelijk om met slechts een enkele regel javascript een eenvoudige controle uit te voeren op een formulier. Je controleert dan enkel of een aantal velden zijn ingevuld. Complexere controles zijn mogelijk door regels en functies toe te voegen aan de validatie.

Stel je hebt het volgende formulier op je site:

<form id="formulier">
  <input type="text" name="voornaam" id="voornaam" />
  <input type="text" name="achternaam" id="achternaam" />
  <input type="submit" value="opslaan" />
</form>

Om op dit formulier te controles toe te voegen zijn twee stappen nodig:

  • de verplichte velden moeten de class "required" krijgen

  • met een regel javascript moet worden aangegeven dat het formulier gecontroleerd moet worden


  • De eerste stap is eenvoudig, stel "achternaam" is verplicht, ons formulier ziet er dan als volgt uit:

    <form id="formulier">
      <input type="text" name="voornaam" id="voornaam" />
      <input type="text" name="achternaam" id="achternaam" class="required" />
      <input type="submit" value="opslaan" />
    </form>

    de tweede stap zetten we in de "ready" methode van jquery:

    <script>
      $(document).ready(function(){
        $("#formulier").validate();
      };
    </script>

    Dat is alles, wanneer de gebruiker nu het veld "achternaam" niet invult krijgt hij de melding dat het veld verplicht is. Naast "required" zijn er meer classes beschikbaar in de plugin, zoals "email" voor het valideren van e-mailadressen, "url" voor het valideren van url's, enz. Naast deze standaard methoden kun je ook je eigen toevoegen. Laten we zeggen dat "achternaam" niet alleen verplicht is, maar ook alleen letters mag bevatten. We kunnen dan onze eigen methode maken om dit te controleren.

    <script>
      $.validator.addMethod('tekst', function (value) { return /^[A-Za-z]*)$/.test(value) }, 'Achternaam mag alleen tekst zijn');
    </script>

    De bovenstaande code voegt een methode toe om dit te doen met de naam 'tekst'. Hiervoor gebruik je de methode "addMethod()" waar je drie parameters aan meegeeft. Als eerste de naam van de nieuwe methode. De tweede parameter is een functie die de controle uitvoert en een true teruggeeft als de meegegeven waarde voldoet en een false als hij niet voldoet. De laatste parameter is de foutmelding die getoond moet worden. Na de methode toegevoegd te hebben kan de naam ("tekst" in dit geval) samen met de andere functies als class aan een inputveld toegevoegd worden.

    Naast het toevoegen van methodes is er ook nog de mogelijkheid om regels toe te voegen. Regels kunnen worden gebruikt om een functie ergens van afhankelijk te maken. Bijvoorbeeld, stel we willen wel dat "achternaam" verplicht is, maar alleen als er niks is ingevuld bij "voornaam". We kunnen dan aan de methode "validate()" een regel toevoegen die dit controleert.

    <script>
      $(document).ready(function(){
        $("#formulier").validate({
          rules: {
            achternaam : {
              required: {
                depends : function() { return ($("#voornaam").val() == '');}
              }
            }
          }
        });
      };
    </script>

    De bovenstaande code voegt de regel voor "achternaam" toe. hierin staat een "depends" (een afhankelijkheid) die controleert of de ingevulde waarde bij "voornaam" leeg is of niet.

    Als laatste willen we natuurlijk een aangepaste foutmelding tonen als achternaam niet is ingevuld. Ook dit voegen we toe aan de validate methode, achter de rules.

    <script>
      $(document).ready(function(){
        $("#formulier").validate({
          rules: {
            achternaam : {
              required: {
                depends : function() { return ($("#voornaam").val() == '');}
              }
            }
          },
          messages: {
            required: "Dit veld is verplicht"
          }
        });
      };
    </script>

    In het messages blok kunnen we een opsomming maken van alle methodes die we in de classes invullen met daarachter een tekst. Deze tekst wordt getoond wanneer de validatie op dit punt niet goed gaat.

    Dit is de basis van de functionaliteit van de validation plugin, natuurlijk is nog meer mogelijk dan alleen het bovenstaande, maar hiermee vang je 99% van de formulier-validaties op.