Vårstäda din webbplats: Formulärvalidering

När våren kommer passar många på att storstäda hemma. Vi delar med oss av några tips på hur du kan ge din webbplats kodbas en vårstädning genom att gno bort gammal JavaScript-kod och ersätta den med putsade, moderna standardlösningar.

Formulärvalidering

Formulärvalidering är ytterligare en uppgift som JavaScript använts till. Även om informationen som skickas alltid ska kontrolleras när den tas emot av en server så är det en god idé att validera informationen i webbläsaren innan användaren kan skicka formuläret och ge användaren tydliga instruktioner om hur de ska rätta till felaktig information.

Detta går till stor del att göra med endast HTML och CSS och det går att rensa bort större delen av JavaScript-koden som hanterar validering.

HTML har särskilda typer av formulärfält för vanliga informationstyper som e-postadress, tal eller telefonnummer. Om det inte räcker finns även ett pattern-attribut där ett reguljärt uttryck kan anges: ett mönster som informationen måste matcha för att vara giltig. Detta räcker oftast för de vanligaste fallen som exempelvis validering av postnummer eller registreringsnummer. 

Genom att använda CSS valid, invalid, user-valid och user-invalid-pseudoselektorer går det att visa och dölja texter eller ändra färg på formulärfält beroende på om värdet är giltigt eller ej. Skillnaden mellan dessa är att valid och invalid appliceras direkt om ett obligatoriskt fält är tomt innan användaren har interagerat med formuläret. Vanligtvis är detta inte önskvärt. User-attributens regler appliceras endast om användaren har interagerat med formuläret.

Exempel på validering av svenskt fordonsregistreringsnummer

<form>
  <label for="zipcode">
    Postnummer (format: NNN NN, obligatoriskt)
  </label>
  <input type="text" id="zipcode" name="zipcode" 
    aria-describedby="zipcode-error-message" 
    pattern="^\d{3}\s?\d{2}$" 
    required>
  <span id="zipcode-error-message" class="error-message">
    Vänligen ange ett postnummer. Fem siffror med eller utan blanksteg efter tredje siffran.
  </span>
</form>

<style>
.error-message {
  display: none;
  color: red;
}

input:user-valid {
  border-color: green;
}

input:user-invalid {
  border-color: red;
}

input:user-invalid + .error-message {
  display: block;
}
</style>

JavaScript kan fortfarande krävas för mer avancerad validering som kräver beräkningar samt för att hantera fokusordning och statusmeddelanden.

Demo av formulärvalidering på CodePen

Webbläsarstöd

Validering av formulärfält har haft fullt stöd i alla webbläsare i över 10 år. Även CSS valid och invalid har haft stöd i alla webbläsare i många år. User-valid och User-invalid är relativt nya och är markerade som Baseline Newly awailable. 

Du hittar fler tips i artikelserien Vårstäda din webbplats.

Publicerad:
Andreas Nylin, porträtt

Andreas Nylin

Senior gränssnittsutvecklare och tillgänglighetsexpert