Jos on olemassa yksi asia, joka ajaa minua hulluksi verkossa, se on, kun syöttömoduulit antavat minun syöttää virheellisiä tietoja vain korostamaan virheen, kun yritän lähettää sen. Näyttää siltä, ​​että puolet lomakkeista, jotka toimitan, on täytettävä uudelleen ja lähetettävä uudelleen, koska salasanani ei ollut suurella kirjaimella, tai salasanani voi olla numeerinen tai muu vaatimus, jota kukaan ei ole maininnut.

Aivojen toimintatapa etsii ratkaisuja, jotka perustuvat meidän edessä oleviin työkaluihin. Et anna isoja kirjaimia ATM: ssä? Ei, koska ATM-näppäimistöllä on vain numeroita. Saatat kärsiä väärän numeron vahingossa, mutta et ole koskaan yrittänyt kirjoittaa sähköpostiosoitettasi tai äitisi tyttönimiä.

Siinä on ongelma, näppäimistö, jota käytät vaikeuttaa tietojen syöttämistä verkossa. Sen luultavasti on välillä 75 ja 100 avainta ja vielä enemmän merkkejä on helppo pitää pitämällä monikytkimien yhdistelmiä. Käyttämällä sitä kirjautumaan Facebookiin on melko tavallista kuin maistaa Ferrari.

Tietyllä näppäimistöllä on tietenkin oltava enemmän syöttövaihtoehtoja kuin mikään erityinen lomakenttä vaatii, koska se on monikäyttöinen työkalu; et voi käytännössä olla eri näppäimistö jokaisen mahdollisen syötteen osalta.

Tämä johtaa vakavaan käytettävyyteen: käyttäjää pyydetään jatkuvasti "korjata" tietonsa lomakkeen mukaiseksi. Se on erinomainen tapa lisätä turhautumista ja menettää liiketoimintaansa.

Kosketusnäytöt ovat tehneet suuria harppauksia tällä alueella muokkaamalla näytönohjain näppäimistöä räätälöimällä mahdolliset syöttötapojen tarvittavat tiedot; anna sähköpostiosoite esimerkiksi iPhonessa, etkä voi kirjoittaa tilaa virheellisesti, koska välilyöntiä ei ole.

Digital Keyboard

Digitaalinen näppäimistökuva kautta Shutterstock

Kunnes me kaikki työskentelemme kosketusnäytöillä, tarvitsemme tilapäisen ratkaisun, ja siellä on varsin yksinkertainen: jQueryn avulla voimme siirtää älykkyyden kerroksen näppäimistön ja syöttökentän välillä ja hyväksyä tiedot vain, jos ne kuuluvat odotettavissa oleviin rajoihin , jättäen huomiotta mitään näiden rajojen ulkopuolelle, luottaen siihen, että se on virhe.

Ensin meidän on asetettava HTML-syötekenttä, jota haluamme rajoittaa, esimerkiksi puhelinnumero:

Sitten asiakirjan päässä meidän on tuettava jQuery:

Ja heti sen jälkeen lisää seuraava komentosarja:

Tämä skripti kulkee, kun asiakirja on valmis ja liittää näppäimen painallusmenetelmän .phoneInput- syöttökenttään. Sen jälkeen havaitaan, mikä avain on painettu sen charCode- ominaisuuden perusteella - numero 0 on annettu koodilla 48, 1 on 49 ja niin edelleen - minkä tahansa alueen ulkopuolelle jäävän avaimen on palautettava vääriksi. Jos menetelmä palauttaa väärin, selain yksinkertaisesti sivuuttaa näppäimen painamisen.

Tämä tarkoittaa sitä, että jos käyttäjä osuu mihin tahansa avaimeen, joka ei ole 0-9, tulo jätetään huomiotta, mikä tehokkaasti rajoittaa panos numeroihin.

Voimme soveltaa samaa tekniikkaa lähes mihin tahansa kenttään, luomalla monimutkaisia ​​sääntöjä loogisen AND: n ja loogisen OR: n avulla. Jos halusimme esimerkiksi rajoittaa sukunimeä, meidän on rajoitettava syötteitä pieniin kirjaimiin (97-122), isoja kirjaimia (65 - 90) ja satunnaiseen väliviivaan (45):

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Sinä pystyt kokeile demoa täällä .

Tämä koodi on asteittainen lisälaite. Se vie jonkin verran kantaasi pois palvelimen validoinnista, mutta se ei tarkoita sitä, että sinun ei myöskään pitäisi validoida kerätyt tiedot.

Ehkäisy, kuten sanonta kuuluu, on parempaa kuin parannuskeino; ja tämän vinkkien avulla näet, kuinka paljon ihmisiä alkaa, mutta eivät täytä lomakkeita, varsinkin kun kyseessä ovat monimutkaiset tietovaatimukset.

Käyttävätkö käyttäjät säännöllisesti lomakkeisiinne virheitä? Kuinka hoidat virheet? Kerro meille kommentit.

Esitetty kuva / pikkukuva: näppäimistön kuva kautta Shutterstock