<form> og <input> Validering - HTML

Test om brugeren har udfyldt formularen korrekt inden formularen sendes

Introduktion

Med form validering kan browseren give besked hvis brugeren har forsøgt at sende en formular med tomt <input required> eller <input type="email"> uden @ i e-mailadressen.

Så kan brugeren rette det indtastede før formularen sendes.

Demo

Prøv og send følgende forkert udfyldte formular ved at trykke på Send formular knappen.

Hvis browseren understøtter form validering af input typerne vil du få besked på at de indtastede data er ugyldige.
Browseren vil først sende formen når de indtastede data er gyldige og du igen trykker på Send formular knappen.

Hvis browseren ikke understøtter form validering så kan formularen sendes ligegyldigt om felterne er tomme eller hvad end der er indtastet.







Resultatet ovenfor er skabt af følgende kode

<FORM> OG <INPUT> VALIDERING DEMO
(PÅ EN SIDE FOR SIG SELV)

Midlertidig kommentar

Firefox 28.0 valider email, url og textarea.
Opera 20.0 valider email, url, number og textarea.
Safari 5.1.7 formularen kan sendes lige meget hvad.
Chrome 30 valider email, url, number og textarea.
Internet Explorer 11 valider email, url, number og textarea.

Screenshots

Her er nogle screenshots fra browsere der giver besked om at den indtastede data er ugyldig.
Beskederne vises når man forsøger at sende formularen (typisk ved tryk på <input type="submit"> knappen).

<input type="email">

Lad os sige vi skriver vores email i en <input type="email"> og trykker på send knappen men glemte at skrive @ i e-mailadressen.

Her ses screenshots fra Opera.
form input type email please enter a valid email address opera

Eller hvis vi kom til at skrive vores navn i email feltet.

Her ses screenshots fra Chrome.
form input type email angiv en e-mailadresse chrome


<input type="url">

Her har jeg glemt at skrive et : i URL adressen.

Her ses screenshots fra Firefox.
form input url indtast en adresse. Firefox

Validering eller ej

Form validering er som standard aktiveret i de nyere browsere som bruger det.

Hvis ikke man ønsker form validering kan man deaktivere det med novalidate attributten for hele formen eller formnovalidate attributten for enkelte feltet.


Hvis man ikke indtaster noget kan det også være gyldigt så formularen kan sendes.

Hvis man ønsker at feltet skal udfyldes så kan man tilføje required attributten også vil browsere give brugeren besked hvis feltet er tomt.
Siden er sidst opdateret mandag 25. juni 2018