Förstå vad som är HTML5-formulärvalidering och flytande inmatningsetikett

Implementering av formulärvalidering spelar en viktig roll för att förhindra illvilliga användare från att skriva in skratttext i formulärfälten. Dessutom begränsar det oerfarna användare från att felaktigt ange felaktig information i formuläret.

Naturligtvis skulle du inte vilja samla in felaktig data från användare på ett osäkert sätt. Så det är absolut nödvändigt för dig att definiera valideringsregler för formulär.

I flera år har vi använt den komplexa och TL;DR (dvs. för lång; läste inte) JavaScript-koden för att implementera formulärvalidering på klientsidan. Tack och lov, med lanseringen av "HTML5-formulärvalidering" kan vi nu lägga till valideringar till ett formulär med minimal JavaScript.

Även om den senaste versionen av HTML-versionen erbjuder flera fördelar, är den viktigaste att den levereras med massor av nya inmatningsfält och attribut som är nödvändiga för att validera ett formulär utan att behöva skriva komplicerad JS (förkortning av JavaScript) valideringskod.

Men kom ihåg att användare lätt kan bli frustrerade när de fyller i ett formulär, speciellt när de får veta att de uppgifter de angett var felaktiga kan öka deras frustration i större utsträckning. Men tack vare HTML5 kan flytande inmatningsetiketter validera formulärdata samtidigt när användare fyller i formuläret. På så sätt kommer användarna omedelbart att veta om de gör något misstag i inmatningsfälten.

Nedan är till exempel en bild publicerad på Dribble av Matt Smith som visar hur det flytande etikettmönstret fungerar när det appliceras på ett formulär:

Det här inlägget tar upp hur du kan implementera flytande indataetiketter när du lägger till valideringar i ett HTML5-formulär.

Men innan du börjar

De flesta av er kanske vill veta processen för att validera ett HTML5-formulär först. När allt kommer omkring, kanske inte alla av er har erfarenhet av att skriva valideringskod för ett HTML5-formulär. Det är också möjligt att du inte kommer att ha kunskap om de nyligen introducerade inmatningsfälten och attributen i HTML5.

En detaljerad översikt av HTML5-formulärvalidering

När du planerar att validera ett formulär, rekommenderas det att du bör börja med valideringen på serversidan först. Och om du är en bra webbdesigner, fortsätt med att lägga till validering på klientsidan, vilket hjälper dina användare att få omedelbar feedback oavsett om de fyller i formuläret med korrekta uppgifter eller inte. Om du till exempel ger användarna omedelbar feedback när de anger data i e-postadressfältet kommer de att få veta att e-postadressen de angav var giltig.

En av de fantastiska HTML5-funktionerna är att den hjälper till att implementera validering på klientsidan utan att vara beroende av skripten. Istället kan du utföra en sådan uppgift genom att använda "valideringsattribut" på dina formulärelement. Viktigast av allt, du behöver bara lägga till attributet "obligatoriskt" för ett inmatningsfält medan resten sköts av din webbläsare.

Här är ett exempel som förklarar användningen av obligatoriskt attribut för att lägga till validering i ett inmatningsfält:

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

Ovanstående kodrad gör din webbläsare medveten om att namnet INPUT-fältet bör betraktas som obligatoriskt (dvs det kan inte lämnas tomt).

Som du kan se visas en röd markering i textrutan som motsvarar inmatningsfältet "Ditt namn". Men så snart någon text skrivs in i namninmatningsfältet, övergår markören till en bockmarkering som indikerar att det angivna värdet är giltigt.

Förutom <input type="text">(dvs. textinmatningstyperna) stöder HTML5 nu flera nya inmatningsalternativ som sökning, e-post, tel, datetime, etc. Med enkla ord, med HTML5 kan vi skriva nedanstående kodrad:

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

till något som:

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

Desktop-webbläsare återger ovanstående kod precis som alla vanliga textfält.

En annan viktig sak som jag skulle vilja påpeka är att: när du försöker ange attributen som obligatoriskt eller input type="email” i CodePen-demon även utan något innehåll, kommer du fortfarande att få ett felmeddelande meddelande när du klickar på knappen "Skicka" utan någon giltig e-postadress:

I exemplet vi har diskuterat ovan kan du se att webbläsaren som standard visar ett felmeddelande. Men vad händer om du vill tillämpa din egen (dvs anpassade) valideringsregel på inmatningsvärdet? Det är här som Regex-mönstret kommer väl till pass.

Förstå RegEx-mönster

Du kanske har sett mönster när du angav en e-postadress som abc@a. Naturligtvis vill du att dina användare ska ange en riktig e-postadress. Och genom att ange ditt eget val av mönster som matchar dina data kommer det att hjälpa till att validera det angivna värdet. Du kan till exempel se till att e-postmeddelandet matchar mönstret som innehåller tre tecken eller fler i slutet. För att göra det måste du använda "Pattern attribute" och Regular Expressions (RegEx).

RegEx är i grunden ett språk som används för att analysera eller manipulera texten. Oftast används reguljära uttryck för att utföra komplexa operationer (som sökning och ersätt) för bättre bildande av textdata. Idag kan du hitta användningen av reguljära uttryck i nästan alla programmerings- och skriptspråk. RegEx kan användas för att validera data som anges i formulärfälten, genom att tillämpa dem på indatatyper som använder mönsterattributet enligt följande:

<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}">

Dessutom, om några valideringsfel uppstår kan du välja att bestämma ett titelattribut tillsammans med valideringsfelet för att skicka ett meddelande förutom "Fel format!" med hjälp av nedanstående kodrad:

<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.">

Tänk på att du inte behöver skriva något absurt mönster för varje ingång. Istället behöver du i många fall bara tilldela det nödvändiga attributet till någon speciell typ av data. Till exempel kommer ett tal över 8 att se ut så här:

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

Tänk också på att inte alla webbläsare ger stöd för alla tillgängliga valideringsattribut. Ta till exempel Firefox-webbläsaren är inte kompatibel med "minlength"-mönstret.

Fördelen med att använda HTML5-formulärvalidering

Den största fördelen med att implementera HTML5-formulärvalidering är omedelbar feedback. Oftast kommer en sorts indikation att markeras medan användare fyller i något fält i ett formulär, för att informera dem om det angivna värdet var giltigt eller inte.

Nu, när du matar in något i textrutan ändras kantfärgen till grön enligt följande:

Men som du kan se finns det en nackdel med detta tillvägagångssätt. Även när man lägger till ett ogiltigt (eller ofullständigt) värde i fältet ‘Förnamn’ får användaren en indikation på att värdet är korrekt. Du kanske funderar på att lägga :invalid:not(:empty)till i koden. Tyvärr fungerar inte sådan logik med webbläsarna eftersom de vanligtvis anser att formulärelementen är tomma.

Undrar du vad du ska göra?

Du kan prova att lägga till den nya pseudo-väljaren som heter ":placeholder-shown" i koden enligt följande:

<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 flesta webbläsare verkar inte ge stöd för platshållare som visas, så det är bättre för dig att skriva ett skript för att växla mellan en klass när inmatningsfältet är tomt eller inte. Här är JavaScript-koden för detsamma:

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

OBS: Kom ihåg att ta bort platshållarelementet från HTML-uppmärkningen ovan.

Nu när du kör ovanstående kodavsnitt tillsammans med HTML5-uppmärkning, kommer utdata att se ut så här:

Som du kan se förblir färgen på textrutan röd tills valideringen som tillämpas på fältet inte är uppfylld. Och om du klickar på Skicka visas ett felmeddelande när du anger ett ofullständigt namn.

Men så snart användaren anger hela (över 3 tecken) ändras färgen på textrutans ram till grön.

Hur kan du lägga till flytande inmatningsetikett i HTML5?

Och nu, låt oss diskutera tillvägagångssättet för att lägga till flytande inmatningsetikett när du validerar ditt HTML5-formulär. Att göra det hjälper till att förbättra utseendet och känslan av formen. Här är HTML-uppmärkningen.

För att implementera flytetikettsmönstret måste du trycka taggen precis under <input>elementet i din HTML-kod:

<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 kommer att se ut ungefär så här:

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;
}

Och slutligen, skriv JavaScript-koden:

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

Produktion:

Du kan implementera flera effekter när du använder flytande inmatningsetiketter i HTML5, till exempel:

• Lägg till ikoner med tona in/ut-effekt samtidigt som du validerar ett HTML5-formulär.
• Skaka ingången om de angivna uppgifterna är ogiltiga.
• Gör färgen på inmatningarna svagare när de är korrekt ifyllda.

Saker att tänka på

När du arbetar med att implementera valideringar till ett HTML5-formulär måste du vara bekant med:

1. Webbläsarstöd: HTML5-formulär fungerar i moderna webbläsare och IE10+ på ett perfekt sätt. Även om IE version 9 och äldre versioner inte stöder valideringspseudoväljare som avstår från att utforma formuläret, men det kommer fortfarande att fungera korrekt.
2. Varning: En sak du inte kan utföra när du tillämpar valideringar på ett HTML5-formulär är att utforma valideringsmeddelandena. Det beror på att sådan funktionalitet är inaktiverad av webbläsare.

Slutord

Att implementera valideringar till ett formulär är avgörande för att lägga till ett extra lager av säkerhet på din webbplats. Detta beror på att det förhindrar skändliga användare från att lägga till skadlig text som värdet i dina formulärfält. Dessutom, att ge omedelbar feedback till användare när de anger indata i ett validerat inmatningsfält i formuläret kommer att bidra till att förbättra deras upplevelse. När allt kommer omkring kommer de inte att behöva lägga tid på att inse att de gjorde ett misstag när de fyllde i formuläret. Men att validera ett formulär med enbart JavaScript kan vara utmanande. Det är här HTML5-formulärvalidering kommer till din räddning.

När du tillämpar valideringar på ett formulär med HTML5 behöver du inte skriva långa rader med komplex JS-kod. Istället kan du implementera regler för formulärvalidering med minimal JavaScript-kodning. Viktigast av allt är att många nya funktioner är tillgängliga med HTML5-formulärvalidering som flytande inmatningsetikett som får ett formulär att se vackert ut, vilket uppmuntrar användare att skicka in formulär.