Selvom du ikke er utvikler håper jeg at dette innlegget vil vise deg at skjemavalidering ikke trenger å være vanskelig å få på plass. Når du har lært det du trenger å vite om feilmeldinger, så kan du tipse utviklerne i ditt prosjekt om de mer tekniske aspektene ved feilmeldinger. Det er også konkrete eksempler nedover i inlegget som du kan prøve, så ikke la deg skremme av at du ikke kan JavaScript, det er veldig lite av det her.

Validatious – et JavaScript valideringsbibliotek

I dette innlegget viser jeg bruk av Validatious, et lite bibliotek for å validere skjemaer med JavaScript. Jeg skrev og slapp Validatious som et open source bibliotek i fjor etter å ha jobbet med skjemavalidering i en rekke prosjekter. Validatious kan brukes uavhengig av hvilket JavaScript-rammeverk du ellers bruker (det vil altså fungere med jQuery, Prototype og andre).

Validatious har funksjonalitet for å snappe opp valideringsregler fra klassenavn i HTML. Sammen med CSS for å style feilmeldinger og et lite script for å konfigurere oppførsel kan du komme langt selvom du ikke er noen JavaScript-ekspert.

Validatious gir mekanikken, ikke designet

Målet med Validatious var å samle logikken bak skjemavalidering på en plass, ikke å lage en ferdig pakke for feilmeldinger – hvordan disse skal kommuniseres er prosjektavhengig. Validatious gir deg ikke noe design og har ingen preferanser på hvordan skjemaene dine ser ut, så disse tingene trenger du fortsatt å bruke tid på å tenke ut. Validatious gjør det derimot enkelt å få på plass validering på klientsiden.

Et eksempel

Last ned Validatious og sett opp følgende testfil:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Skjemavalidering med Validatious</title>
  </head>
  <body>
    <script type="text/javascript" src="v2.standalone.full.min.js"></script>
    <script type="text/javascript" src="errors.no.js"></script>
  </body>
</html>

Legg merke til det andre scriptet: Standard-feilmeldingene i Validatious er på engelsk, så vi må laste inn en egen fil med norske meldinger. Denne fila kan du hente her. Senere skal vi se hvordan vi kan ta bedre kontroll over feilmeldingene.

Med litt rask CSS ser dette skjemaet omtrent ut som dette:

Skjemaets utgangspunkt

Skjemaets utgangspunkt

Det er to måter å bruke Validatious til å validere skjemaer:

  1. Ved å kode validering med JavaScript
  2. Ved å legge til klassenavn og andre attributter i HTML-en for skjemaet

For de fleste brukstilfeller kan du lage en godt tilpasset løsning kun ved å endre på HTML-en din og skrive CSS for å style meldingene. Dette er strategien vi går for i dette innlegget. Det finnes en god del dokumentasjon av hvordan du kan gjøre disse tingene fra JavaScript på validatious.org.

Legg validering på et skjema

Følgende er et utsnitt av skjemaet jeg bruker som eksempel, det er stylet til å ligne registreringen til Yahoo! som ble fremhevet som best practice i Philips innlegg:

<form id="register" action="takk.html" method="post">
  <h2>Om deg</h2>
  <fieldset>
    <div class="field">
      <label for="first_name"><span>Fornavn</span></label>
      <input id="first_name" name="first_name" type="text">
    </div>
    <div class="field">
      <label for="last_name"><span>Etternavn</span></label>
      <input id="last_name" name="last_name" type="text">
    </div>
    <div class="field">
      <label for="email"><span>E-post</span></label>
      <input id="email" name="email" type="text">
    </div>
  </fieldset>
  [SNIP]
</form>

Et relativt simpelt skjema. For å legge validering på dette skjemaet med Validatious er det to ting som må til:

  1. Skjemaet må markeres som validerbart med class="validate"
  2. Feltene må tilordnes valideringsregler via class-attributtet

I dette tilfellet ønsker vi at alle feltene skal være påkrevd, og vi ønsker å sjekke at e-post er en gyldig e-postadresse:

<form id="register" class="validate" action="takk.html" method="post">
  <h2>Om deg</h2>
  <fieldset>
    <div class="field">
      <label for="first_name">Fornavn</label>
      <input id="first_name" class="required" name="first_name" type="text">
    </div>
    <div class="field">
      <label for="last_name">Etternavn</label>
      <input id="last_name" class="required" name="last_name" type="text">
    </div>
    <div class="field">
      <label for="email">E-post</label>
      <input id="email" class="required email" name="email" type="text">
    </div>
  </fieldset>
  [SNIP]
</form>

Med disse enkle endringene får vi validert skjemaet når vi trykker på registrer-knappen. Som du kan se vises det her én feilmelding per felt som feiler (selvom e-post har to regler som ikke er tilfredsstilt):

Skjema med feilmeldinger

Skjema med feilmeldinger

Prøv eksempel #1

Legg forøvrig merke til at dersom du sender inn skjemaet tomt så vil du få feil på samtlige felter. Om du nå legger litt tekst i eksempelvis fornavn-feltet og tabber videre til neste felt vil du legge merke til at Validatious rydder vekk feilmeldingen umiddelbart. Dette kan du skru av om du ikke liker det. Dersom du hopper videre til e-post-feltet og skriver inn en tekst som ikke er en gyldig e-post-adresse vil du se at feilmeldingen ikke forsvinner, men oppdateres når du går ut av feltet.

Litt bling, takk

Skjemaet har validering, det er vel og bra, men feilmeldingene ligner ikke på Yahoos feilmeldinger. Det kan vi fikse greit. Det er mulig å ta fullstendig kontroll over hvordan feilmeldinger legges inn i HTML-dokumentet, men for å sette deg igang har Validatious en standardløsning. Du kan bruke et verktøy som Firebug for å se hva Validatious gjør, men jeg kan også fortelle deg det:

  1. div-elementet rundt felt som feiler merkes med klassenavnet
    "error"
  2. Først i div-elementet legges det til en ul med
    klassen "messages"
  3. Inne i ovenfornevnte ul legges feilmeldingene inn i hvert
    sitt li-element

I utgangspunktet viser Validatious som sagt én feilmelding per felt, men det er mulig å be den om å sette inn et gitt antall, eller alle.

Vi kan sprite opp feilmeldingene med litt CSS:

/* Feilmeldinger */
.error {
    background: url(error_arrow_bg.gif) -50px 0 no-repeat;
    position: relative;
}
 
.error label span {
    background: url(smileyliamandroundedcorners_v5.png) no-repeat;
    background-position: -1px -120px;
    color: #c00e0c;
}
 
.error .messages {
    color: #c00e0c;
    list-style: none;
    left: 435px;
    margin: 0;
    position: absolute;
    top: 1px;
}

Dette er en litt rask hack som ikke er spesielt godt sjekka i mange browsere, men fungerer for å illustrere poenget. Denne gangen ser feilmeldingene litt stiligere ut, og det er ikke mye arbeid vi har lagt ned i dette:

Design på feilmeldinger

Design på feilmeldinger

Lek med skjema #2

Litt positiv feedback, takk

Etter at brukeren har vært gjennom den prøvende opplevelsen det er å få kjeft av websiden vår kan det være hyggelig å backe opp med litt positiv feedback når et felt som har hatt feil blir rettet. På samme måte som et felt blir merket med klassenavnet "error" når det inneholder feil er det mulig å få et felt merket med klassenavnet "success" i det øyeblikket det rettes opp. Dette kan vi bruke til å gi brukeren et hint om at vi nå er fornøyd. For å gjøre dette må vi først gi Validatious et hint om klassenavnet vi ønsker:

<script type="text/javascript"><!--mce:2--></script>

Denne legges til etter script-elementet som inkluderer Validatious. Deretter legger vi til noen linjer CSS:

.success {
    background: url(checkbullet.gif) 320px 0 no-repeat;
}

En kjapp liten tweak som kanskje eller kanskje ikke er det du er ute etter:

Positiv feedback

Positiv feedback

Lek med skjema #3

Instant feedback, takk

I Yahoos skjema får du umiddelbar feedback når du gjør noe gæernt. Det kan vi få til også her ved å legge til en ny one-liner i script-blokken som konfigurerer Validatious (den vi nettopp innførte). Den skal se sånn ut:

v2.Field.prototype.instant = true;

Med denne på plass vil du få feedback etter hvert felt. Om feltet er OK får du en grønn hake ved siden av det, er det problemer får du beskjed om hva som er feilen.

Instant feedback

Instant feedback

Lek med skjema #4.

Bedre feilmeldinger

Validatious tilbyr et sett med gode standardmeldinger, men standardmeldinger kan svært sjelden konkurrere med tilpassede feilmeldinger. La oss si at vi ikke var så fornøyde med feilmeldingen som dukker når vi taster inn en e-postadresse som ikke er gyldig. Vi kan da gi en bedre melding på to måter. Den enkleste er å gi input-elementet et title-attributt som gir en tilpasset melding:

<div class="field">
  <label for="email"><span>E-post</span></label>
  <input id="email" class="required email" name="email" type="text"
         title="Gi meg en e-post og bruk sånn @ og punktum og sånn!">
</div>

Med dette kan vi se at vår tilpassede feilmelding brukes i stedet for de innebygde meldingene. Lek med skjema. Hvorvidt dette er en god feilmelding er kanskje en annen diskusjon, men jeg er bare utvikler – vi vet ikke sånt.

Dersom vi bare ønsket å hjelpe Validatious med feltnavnet kan vi gjøre dette også. Standardmeldingen som genereres for manglende fornavn er «Fornavn er påkrevd». «Fornavn» snappes opp fra labelen foran feltet. Ved å gi denne et
title-attributt kan vi bruke et annet feltnavn i feilmelding enn det som vises i labelen:

<div class="field">
  <label title="Fornavnet ditt" for="first_name"><span>Fornavn</span></label>
  <input id="first_name" class="required" name="first_name" type="text">
</div>

Lek med skjema.

Lær mer

Vi har sett basic bruk av Validatious, men den kan mer enn dette:

Og masse mer. Sjekk validatious.org for mer informasjon eller ta kontakt om du har spørsmål og eller kommentarer (gjerne via kommentarene nedenfor).

Dersom det er interesse for det følger jeg gjerne opp med et nytt inlegg ved en senere anledning der jeg kan vise validering av mer komplekse skjemaer samt bruk av eksempelvis jQuery for å lage enda mer bling – type animerte feilmeldinger eller lignende.

Disclaimer: Skjemavalidering med JavaScript

Det er viktig å forstå at input av sikkerhetsgrunner alltid må verifiseres på serveren uavhengig om du også gjør det på klienten. Dette innlegget handler om å bedre interaksjonen i skjemaer i en webløsning ved å bruke JavaScript til å
validere input «on-the-fly». Formålet er å gjøre bruk av tjenesten din til en mer lystbetont øvelse, ikke validere input for sikkerhet.