<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-mail-adressen.

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-mail-adressen.

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-mail-adresse 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.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.