HTML5-lomakkeen validoinnin ja kelluvan syöttötunnisteen ymmärtäminen
Lomakkeen validoinnin toteuttamisella on tärkeä rooli estäessä pahantahtoisia käyttäjiä syöttämästä hölynpölyä tekstiä lomakekenttiin. Se myös estää kokemattomia käyttäjiä syöttämästä lomakkeeseen virheellisesti vääriä tietoja.
Et tietenkään halua kerätä käyttäjiltä vääriä tietoja epävarmalla tavalla. Joten sinun on ehdottomasti määritettävä lomakkeiden validointisäännöt.
Vuosien ajan olemme käyttäneet monimutkaista ja TL;DR (eli liian pitkää; ei lukenut) JavaScript-koodia toteuttaaksemme lomakkeiden validointia asiakaspuolella. Onneksi "HTML5-lomakkeen validoinnin" julkaisun myötä voimme nyt lisätä vahvistuksia lomakkeeseen, jossa on minimaalinen JavaScript.
Vaikka uusin HTML-versio tarjoaa useita etuja, tärkein niistä on kuitenkin se, että sen mukana toimitetaan runsaasti uusia syöttökenttiä ja attribuutteja, jotka ovat välttämättömiä lomakkeen validoinnissa ilman monimutkaista JS-tarkistuskoodia (lyhenne JavaScriptistä).
Muista kuitenkin, että käyttäjät voivat helposti turhautua täyttäessään lomaketta, varsinkin kun he tietävät, että syöttämänsä tiedot olivat virheellisiä, se voi lisätä heidän turhautumistaan. Mutta HTML5:n ansiosta kelluvien syöttötunnisteiden lisääminen voi vahvistaa lomakkeen tiedot samaan aikaan, kun käyttäjät täyttävät lomakkeen. Näin käyttäjät tietävät välittömästi, jos he tekevät virheen syöttökentissä.
Alla on esimerkiksi Matt Smithin Dribble-sivustolle lähettämä kuva, joka osoittaa, kuinka kelluva tarrakuvio toimii, kun sitä käytetään lomakkeeseen:
Tämä viesti käsittelee, kuinka voit ottaa käyttöön kelluvia syöttötunnisteita, kun lisäät tarkistuksia HTML5-lomakkeeseen.
Mutta ennen kuin aloitat
Useimmat teistä haluavat tietää ensin HTML5-lomakkeen validointiprosessin. Loppujen lopuksi kaikilla teistä ei välttämättä ole kokemusta HTML5-lomakkeen vahvistuskoodin kirjoittamisesta. On myös mahdollista, että et tiedä HTML5:n äskettäin käyttöön otettuja syöttökenttiä ja attribuutteja.
Yksityiskohtainen yleiskatsaus HTML5-lomakkeen validoinnista
Kun aiot vahvistaa lomakkeen, on suositeltavaa aloittaa ensin palvelinpuolen vahvistus. Ja jos olet hyvä web-suunnittelija, jatka asiakaspuolen vahvistuksen lisäämistä, mikä auttaa käyttäjiäsi saamaan välitöntä palautetta, täyttävätkö he lomakkeen oikeilla tiedoilla vai eivät. Jos esimerkiksi annat käyttäjille välitöntä palautetta heidän syöttäessään tietoja sähköpostiosoitekenttään, he tietävät, että heidän antamansa sähköpostiosoite oli kelvollinen.
Yksi hienoista HTML5-ominaisuuksista on, että se auttaa toteuttamaan asiakaspuolen validoinnin ilman, että se riippuu komentosarjoista. Sen sijaan voit suorittaa tällaisen tehtävän käyttämällä lomakeelementtien "validointiattribuutteja". Mikä tärkeintä, sinun tarvitsee vain lisätä "pakollinen" attribuutti syöttökenttään, kun taas selaimesi hoitaa loput.
Tässä on esimerkki, joka selittää pakollisen attribuutin käytön vahvistuksen lisäämiseksi syöttökenttään:
Name: <input type="text" name="yourname" required>Yllä oleva koodirivi tekee selaimesi tietoiseksi siitä, että nimi INPUT -kenttää tulee pitää pakollisena (eli sitä ei voi jättää tyhjäksi).
Kuten näette, punainen merkki näkyy tekstikentässä, joka vastaa ‘Nimesi’ syöttökenttää. Mutta heti kun tekstiä syötetään nimen syöttökenttään, merkki muuttuu rasti-merkiksi, joka osoittaa, että syötetty arvo on kelvollinen.
Paitsi <input type="text">(eli tekstinsyöttötyypit) HTML5 tukee nyt useita uusia syöttövaihtoehtoja, kuten haku, sähköposti, puhelin, päivämäärä ja aika. Yksinkertaisesti sanottuna HTML5:llä voimme kirjoittaa alla olevan koodirivin:
<input type="text" name="email">johonkin sellaiseen:
<input type="email" name="email">Pöytäkoneselaimet hahmontavat yllä olevan koodin aivan kuten mikä tahansa vakiotekstikenttä.
Vielä yksi tärkeä asia, jonka haluan huomauttaa, on seuraava: kun yrität syöttää CodePen-demossa attribuutteja, kuten pakollinen tai input type="email”, vaikka ilman sisältöä, saat silti virheilmoituksen. viesti, kun napsautat ‘LÄHETÄ’-painiketta ilman kelvollista sähköpostiosoitetta:
Yllä käsittelemämme esimerkissä voit nähdä, että selain näyttää oletusarvoisesti virheilmoituksen. Mutta entä jos haluat soveltaa omaa (eli mukautettua) vahvistussääntöäsi syötearvoon? Tässä Regex-kuvio on hyödyllinen.
RegEx-mallien ymmärtäminen
Olet ehkä nähnyt kuvioita kirjoittaessasi sähköpostiosoitetta, kuten abc@a. Sanomattakin on selvää, että haluat käyttäjien kirjoittavan oikean sähköpostiosoitteen. Ja määrittämällä oman mallisi, joka vastaa tietojasi, voit vahvistaa syötetyn arvon. Voit esimerkiksi varmistaa, että sähköposti vastaa kuviota, jonka lopussa on vähintään kolme merkkiä. Tätä varten sinun on käytettävä "Pattern-attribuuttia" ja säännöllisiä lausekkeita (RegEx).
RegEx on pohjimmiltaan kieli, jota käytetään tekstin jäsentämiseen tai muokkaamiseen. Useimmiten säännöllisiä lausekkeita käytetään monimutkaisten toimintojen suorittamiseen (kuten haku ja korvaaminen) tekstidatan paremman muodostamiseksi. Nykyään voit löytää säännöllisten lausekkeiden käytön melkein kaikista ohjelmointi- ja komentosarjakielistä. RegEx-lauseketta voidaan käyttää lomakekenttiin syötettyjen tietojen vahvistamiseen pakottamalla ne syöttötyypeille käyttämällä kuvioattribuuttia seuraavasti:
<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}">Jos vahvistusvirheitä tapahtuu, voit myös määrittää otsikon määritteen vahvistusvirheen ohella ja lähettää viestin "Väärä muoto!" käyttämällä alla olevaa koodiriviä:
<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.">Muista, että sinun ei tarvitse kirjoittaa mitään absurdia kuviota jokaiselle syötteelle. Sen sijaan monissa tapauksissa sinun on vain määritettävä vaadittu attribuutti tietylle tiedolle. Esimerkiksi numero, joka on yli 8, näyttää tältä:
<input type="number" min="8" required>Muista myös, että kaikki selaimet eivät tue kaikkia saatavilla olevia vahvistusmääritteitä. Otetaan esimerkiksi Firefox-selain, joka ei ole yhteensopiva "minlength"-mallin kanssa.
HTML5-lomakkeen validoinnin hyödyt
Suurin etu HTML5-lomakevalidoinnin käyttöönotossa on välitön palaute. Useimmiten eräänlainen ilmaisu korostuu, kun käyttäjät täyttävät jonkin lomakkeen kentän ilmoittaakseen, oliko syötetty arvo kelvollinen vai ei.
Kun nyt syötät jotain tekstiruutuun, reunan väri muuttuu vihreäksi seuraavasti:
Kuten näette, tällä lähestymistavalla on kuitenkin varjopuolensa. Jopa lisättäessä virheellinen (tai epätäydellinen) arvo Etunimi-kenttään, käyttäjä saa ilmoituksen, että arvo on oikea. Ehkä voit harkita lisäämistä :invalid:not(:empty)koodiin. Valitettavasti tällainen logiikka ei toimi selaimissa, koska ne pitävät lomakeelementtejä yleensä tyhjinä.
Mietitkö mitä tehdä?
Voit yrittää lisätä koodiin uuden pseudovalitsimen ":placeholder-shown" seuraavasti:
<form>
<label>
<span>First Name</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
</label>
<button>Submit</button>
</form>Mutta useimmat selaimet eivät näytä tukevan paikkamerkkien näyttämistä, joten sinun on parempi kirjoittaa komentosarja luokan vaihtamiseksi, kun syöttökenttä on tyhjä tai ei. Tässä on saman JavaScript-koodi:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});HUOMAA: Muista poistaa paikkamerkkielementti yllä olevasta HTML-merkinnästä.
Nyt kun suoritat yllä olevan koodinpätkän yhdessä HTML5-merkintöjen kanssa, tulos näyttää tältä:
Kuten näette, tekstiruudun väri pysyy punaisena, kunnes kenttään tehty vahvistus ei ole täytetty. Ja napsauttamalla Lähetä, näyttöön tulee virheilmoitus epätäydellisen nimen syöttämisestä.
Mutta heti kun käyttäjä kirjoittaa täydellisen (yli 3 merkkiä), tekstiruudun reunan väri muuttuu vihreäksi.
Kuinka voit lisätä kelluvan syöttötunnisteen HTML5:een?
Ja nyt keskustellaan kelluvan syöttötunnisteen lisäämisestä HTML5-lomaketta vahvistettaessa. Tämä auttaa parantamaan muodon ulkonäköä ja tuntumaa. Tässä on HTML-merkintä.
Jos haluat ottaa float-etikettimallin käyttöön, sinun on työnnettävä tunniste suoraan <input>HTML-merkinnän elementin alle:
<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 näyttää tältä:
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;
}Ja lopuksi kirjoita JavaScript-koodi:
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
if ($(this).val().trim() !== '') {
$(this).removeClass('empty');
} else {
$(this).addClass('empty');
}
});Lähtö:
Voit toteuttaa useita tehosteita käytettäessä kelluvia syöttötunnisteita HTML5:ssä, kuten:
- Lisää kuvakkeita, joissa on häivytystehoste, kun vahvistat HTML5-lomakkeen.
- Ravista syöttöä, jos syötetyt tiedot ovat virheellisiä.
- Tee syötteiden väri himmeäksi, kun ne on täytetty oikein.
Harkittavia asioita
Kun työskentelet validoinnissa HTML5-lomakkeessa, sinun on tunnettava:
- Selaintuki: HTML5-lomakkeet toimivat moderneissa selaimissa ja IE10+:ssa täydellisellä tavalla. Vaikka IE-versio 9 ja vanhemmat versiot eivät tue validointipseudovalitsimia, jotka estävät sinua muokkaamasta muotoa, se toimii silti oikein.
- Varoitus: Yksi asia, jota et voi tehdä, kun käytät tarkistuksia HTML5-lomakkeeseen, on vahvistusviestien tyyli. Tämä johtuu siitä, että selaimet ovat poistaneet tällaiset toiminnot käytöstä.
Viimeiset sanat
Vahvistusten käyttöönotto lomakkeelle on erittäin tärkeää lisättäessä sivustollesi ylimääräinen suojaus. Tämä johtuu siitä, että se estää ilkeitä käyttäjiä lisäämästä haitallista tekstiä arvoksi lomakekenttiisi. Lisäksi välittömän palautteen antaminen käyttäjille heidän syöttäessään syötettä lomakkeen vahvistettuun syöttökenttään auttaa parantamaan heidän käyttökokemustaan. Loppujen lopuksi heidän ei tarvitse käyttää aikaa tunnustaessaan tehneensä virheen lomakkeen täyttämisessä. Lomakkeen vahvistaminen pelkällä JavaScriptillä voi kuitenkin olla haastavaa. Tässä HTML5-lomakkeen validointi tulee apuusi.
Kun käytät tarkistuksia lomakkeeseen HTML5:llä, sinun ei tarvitse kirjoittaa pitkiä rivejä monimutkaista JS-koodia. Sen sijaan voit ottaa käyttöön lomakkeiden vahvistussääntöjä minimaalisella JavaScript-koodauksella. Mikä tärkeintä, monia uusia ominaisuuksia on saatavilla HTML5-lomakkeen validoinnissa, kuten kelluva syöttötunniste, jotka tekevät lomakkeesta upean ja rohkaisevat käyttäjiä lähettämään lomakkeita.