Forstå hva som er HTML5-skjemavalidering og flytende inndataetikett

Implementering av skjemavalidering spiller en viktig rolle for å hindre ondsinnede brukere fra å skrive inn snaddertekst i skjemafeltene. Det begrenser også uerfarne brukere fra å feilaktig legge inn feil informasjon i skjemaet.

Selvfølgelig vil du ikke samle inn feil data fra brukere på en usikker måte. Så det er viktig for deg å definere valideringsregler for skjemaer.

I årevis har vi brukt den komplekse og TL;DR (dvs. for lang; leste ikke) JavaScript-koden for å implementere skjemavalidering på klientsiden. Heldigvis, med utgivelsen av "HTML5 form validation" kan vi nå legge til valideringer i et skjema med minimalt med JavaScript.

Mens den siste HTML-versjonsutgivelsen tilbyr flere fordeler, er den viktigste at den leveres med mange nye inndatafelt og attributter som er avgjørende for å validere et skjema uten å måtte skrive komplisert JS (forkortelse for JavaScript) valideringskode.

Men husk at brukere lett kan bli frustrerte når de fyller ut et skjema, spesielt når de får vite at dataene de skrev inn var feil kan øke frustrasjonen deres i større grad. Men takket være HTML5 kan det å legge til flytende inndataetiketter validere skjemadataene samtidig når brukere fyller ut skjemaet. På denne måten vil brukere umiddelbart vite i tilfelle de gjør noen feil i inndatafeltene.

Nedenfor er for eksempel et bilde lagt ut på Dribble av Matt Smith som viser hvordan det flytende etikettmønsteret fungerer når det brukes på et skjema:

Dette innlegget dekker hvordan du kan implementere flytende inndataetiketter når du legger til valideringer i et HTML5-skjema.

Men før du begynner

De fleste av dere vil kanskje først vite prosessen med å validere et HTML5-skjema. Tross alt, kanskje ikke alle av dere har erfaring med å skrive valideringskode for et HTML5-skjema. Det er også mulig at du ikke vil ha kunnskap om de nylig introduserte inndatafeltene og attributtene i HTML5.

En detaljert oversikt over HTML5-skjemavalidering

Når du planlegger å validere et skjema, anbefales det at du først begynner med valideringen på serversiden. Og i tilfelle du er en god nettdesigner, fortsett med å legge til validering på klientsiden, slik at brukerne dine får umiddelbar tilbakemelding om de fyller ut skjemaet med riktige data eller ikke. For eksempel, å gi umiddelbar tilbakemelding til brukere når de skriver inn data i e-postadressefeltet, vil gi dem beskjed om at e-postadressen de skrev inn var gyldig.

En av de flotte HTML5-funksjonene er at den hjelper med å implementere validering på klientsiden uten å være avhengig av skriptene. I stedet kan du utføre en slik oppgave ved å bruke "valideringsattributter" på skjemaelementene dine. Viktigst av alt, du trenger bare å legge til attributtet "påkrevd" for et inndatafelt mens resten blir tatt hånd om av nettleseren din.

Her er et eksempel som forklarer bruken av obligatorisk attributt for å legge til validering i et inndatafelt:

Name: <input type="text" name="yourname" required>

Kodelinjen ovenfor gjør nettleseren din oppmerksom på at navnet INPUT-feltet bør anses som obligatorisk (dvs. det kan ikke stå tomt).

Som du kan se, vises en rød markør i tekstboksen som tilsvarer "Ditt navn"-inntastingsfeltet. Men så snart noe tekst er skrevet inn i navnefeltet, endres markøren til et hakemerke som indikerer at den angitte verdien er gyldig.

Bortsett fra <input type="text">(dvs. tekstinndatatypene), støtter HTML5 nå flere nye inndataalternativer som søk, e-post, tel, datetime, etc. Med enkle ord, med HTML5 kan vi skrive kodelinjen nedenfor:

<input type="text" name="email">

inn i noe sånt som:

<input type="email" name="email">

Desktop-nettlesere vil gjengi koden ovenfor akkurat som alle standard tekstfelt.

En annen viktig ting jeg ønsker å gjøre deg oppmerksom på er at: når du prøver å skrive inn attributtene som obligatorisk eller input type="email” i CodePen-demoen selv uten noe innhold, vil du fortsatt få en feilmelding melding ved å klikke på ‘SEND’-knappen uten noen gyldig e-postadresse:

I eksemplet vi har diskutert ovenfor, kan du se at nettleseren som standard viser en feilmelding. Men hva om du ønsker å bruke din egen (dvs. tilpassede) valideringsregel på inngangsverdien? Det er her Regex-mønsteret kommer godt med.

Forstå RegEx-mønstre

Du har kanskje sett mønstre når du skrev inn en e-postadresse som abc@a. Unødvendig å si at du vil at brukerne dine skal angi en ekte e-postadresse. Og ved å spesifisere ditt eget valg av mønster som samsvarer med dataene dine, vil det bidra til å validere den angitte verdien. Du kan for eksempel sørge for at e-posten samsvarer med mønsteret som inneholder tre tegn eller mer på slutten. For å gjøre det, må du bruke "Pattern attribute" og Regular Expressions (RegEx).

RegEx er i utgangspunktet et språk som brukes til å analysere eller manipulere teksten. Oftest brukes regulære uttrykk for å utføre komplekse operasjoner (som søk og erstatt) for bedre dannelse av tekstdataene. I dag kan du finne bruken av regulære uttrykk i nesten alle programmerings- og skriptspråk. RegEx kan brukes til å validere dataene som er angitt i skjemafeltene, ved å håndheve dem på inndatatyper ved å bruke mønsterattributtet som følger:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Hvis det oppstår noen valideringsfeil, kan du velge å bestemme et tittelattributt sammen med valideringsfeilen for å sende en melding i tillegg til "Feil format!" ved å bruke den gitte kodelinjen nedenfor:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Husk at du ikke trenger å skrive noe absurd mønster for hver eneste inngang. I stedet trenger du i mange tilfeller bare å tildele nødvendige attributter til en bestemt type data. For eksempel vil et tall over 8 se slik ut:

<input type="number" min="8" required>

Husk også at ikke alle nettleserne gir støtte for alle tilgjengelige valideringsattributter. Ta for eksempel Firefox-nettleseren som ikke er kompatibel med "minlength"-mønsteret.

Fordel ved å bruke HTML5-skjemavalidering

Den største fordelen med å implementere HTML5-skjemavalidering er umiddelbar tilbakemelding. For det meste vil en slags indikasjon bli uthevet mens brukere fyller ut et felt i et skjema, for å informere dem om den angitte verdien var gyldig eller ikke.

Nå, når du skriver inn noe i tekstboksen, endres kantfargen til grønn som følger:

Men som du kan se, er det en ulempe ved denne tilnærmingen. Selv når du legger til en ugyldig (eller ufullstendig) verdi i ‘Fornavn’-feltet, får brukeren en indikasjon på at verdien er riktig. Kanskje du kan tenke på å legge til :invalid:not(:empty)i koden. Dessverre vil slik logikk ikke fungere med nettleserne siden de vanligvis anser skjemaelementer som tomme.

Lurer du på hva du skal gjøre?

Du kan prøve å legge til den nye pseudovelgeren kalt ":placeholder-shown" i koden som følger:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Men de fleste nettlesere ser ikke ut til å gi støtte for plassholder-vist, så det er bedre for deg å skrive et skript for å veksle mellom en klasse når inndatafeltet er tomt eller ikke. Her er JavaScript-koden for det samme:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

MERK: Husk å fjerne plassholderelementet fra HTML-koden ovenfor.

Nå når du kjører kodebiten ovenfor sammen med HTML5-oppmerking, vil utdataene se slik ut:

Som du kan se forblir fargen på tekstboksen rød til valideringen som er brukt på feltet ikke er oppfylt. Og ved å klikke på Send vises en feilmelding når du skriver inn et ufullstendig navn.

Men så snart brukeren skriver inn hele (over 3 tegn), endres fargen på tekstbokskanten til grønn.

Hvordan kan du legge til flytende inputetikett i HTML5?

Og nå, la oss diskutere tilnærmingen til å legge til flytende inndataetikett når du validerer HTML5-skjemaet. Å gjøre det, bidrar til å forbedre utseendet og følelsen av skjemaet. Her er HTML-koden.

For å implementere flytetikettmønsteret, må du skyve taggen rett under elementet <input>i HTML-koden din:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS vil se omtrent slik ut:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

Og til slutt, skriv JavaScript-koden:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Produksjon:

Du kan implementere flere effekter når du bruker flytende inndataetiketter i HTML5, for eksempel:

• Legg til ikoner med fade inn/ut-effekt mens du validerer et HTML5-skjema.
• Rist inndataene hvis de angitte dataene er ugyldige.
• Gjør fargen på innganger svak når de er fylt ut riktig.

Ting å vurdere

Når du arbeider med å implementere valideringer til et HTML5-skjema, må du være kjent med:

1. Nettleserstøtte: HTML5-skjemaer fungerer i moderne nettlesere og IE10+ på en perfekt måte. Selv om IE versjon 9 og eldre versjoner ikke støtter validering av pseudo-velgere som avstår fra å style skjemaet, men det vil fortsatt fungere korrekt.
2. Advarsel: En ting du ikke kan utføre når du bruker valideringer på et HTML5-skjema, er å style valideringsmeldingene. Det er fordi slik funksjonalitet er deaktivert av nettlesere.

Siste ord

Implementering av valideringer til et skjema er avgjørende for å legge til et ekstra lag med sikkerhet til nettstedet ditt. Dette er fordi det forhindrer ondsinnede brukere fra å legge til ondsinnet tekst som verdien i skjemafeltene dine. Dessuten vil det å gi umiddelbar tilbakemelding til brukere når de legger inn noen inndata til et validert inndatafelt i skjemaet, bidra til å forbedre opplevelsen deres. Tross alt trenger de ikke å bruke tid på å erkjenne at de har gjort en feil ved å fylle ut skjemaet. Men å validere et skjema med JavaScript alene kan være utfordrende. Det er her HTML5-skjemavalidering kommer deg til unnsetning.

Når du bruker valideringer på et skjema ved hjelp av HTML5, trenger du ikke å skrive lange linjer med kompleks JS-kode. I stedet kan du implementere skjemavalideringsregler med minimal JavaScript-koding. Det viktigste er at mange nye funksjoner er tilgjengelige med HTML5-skjemavalidering, for eksempel flytende inndataetikett som får et skjema til å se nydelig ut, og oppmuntrer brukere til å sende inn skjemaer.