Validator.

Validator.

20 ars ventetiden er over. Skriv inn verktoyet for manglende skjema validering. Det tar de beste delene av HTML 5 og Web Forms 2.0-standarder og gjor dem til noe helt utrolig. Alt i 1,75 Kb av kode.

Bruk HTML5-inputtyper i dag.

HTML5 gir nye inntastetyper som nummer, e-post og URL, og attributter som min, maks, nodvendig og monster. Disse trer ut av esken og vil legge til en ny dimensjon i dine daglige skjemaer. Hvis det ikke er nok, er det enkelt a lage dine egne tilpassede innganger.

Ta kontroll over feilmeldingene dine.

Du kan fullt ut kontrollere nar, hvor og hvordan feilmeldingene vises. Nedenfor, over eller ved siden av feltet. Alt pa en gang eller en pa den tiden. Stor eller liten. Ulike sprak for forskjellige steder. Nar et ugyldig felt er redigert, vil feilmeldingen endres eller forsvinne dynamisk avhengig av inngangen.

Server-side integrasjon.

Du kan bruke en generisk ugyldighetsfunksjon til a vise feil som oppstod pa server-siden. Logikken er ikke knyttet til noen bestemt server-side rammeverk og det er enkelt a integrere i din eksisterende server-side kode. Det eneste serverkravet er muligheten til a returnere data i JSON-format.

Web Forms 2.0.

Web Forms 2.0 er en stor og kompleks standard. Dette verktoyet folger standarden og bruker et sunt undersett av det. For eksempel kan du bruke form.checkValidity () -metoden, eller du kan definere en ugyldig tilbakeringingsfunksjon for dine innganger.

Du tar noen form du liker, krydder den opp med nye HTML5-inputtyper og attributter og foretar en enkelt samtale til jQuery Tools-validatoren. Her er HTML-oppsettet for eksempelskjemaet ovenfor:

Og her er valideringsanropet som muliggjor form validering:

Nar skjemaet er sendt, vil validatoren sorge for at inngangsfeltene passerer alle reglene som er definert for dem. Hvis det er noen feil, vises en feilmelding over alle mislykkede felt. Nar brukeren begynner a fikse verdiene, vil hver feilmelding forsvinne magisk nar inngangen er gyldig. Se pa det minimale oppsettet for flere detaljer.

Validerer innganger uten et skjema.

Verktoyet validerer alle inntastingsfelt bortsett fra knapper og skjulte felt i en bestemt form. Du kan ogsa velge bestemte felt og validere dem. For eksempel:

Siden v1.2.3 en annen $ («.») .validator () samtale ville odelegge den eksisterende forekomsten og vil installere en helt ny validatorinstans.

Vennligst studer den forste demonstrasjonen «Minimal oppsett for Validator». Det l rer deg grunnleggende om form validering.

Stottede HTML5-funksjoner.

jQuery Tools Validator legger til nye inngangstyper og attributter til ditt formkonstruksjonsarsenal.

HTML5-inputtyper.

Na kan du angi mer enn bare «tekst», «avmerkingsboks» eller «radio» for din typeattributt. Her er de nye typene stottet av validator:

HTML5-rekkevidde og datatyper stottes ogsa ved hjelp av innstillingsomrade og datoinnstillingsverktoy. Tomme verdier er tillatt for alle inngangstyper. Hvis du ikke vil tillate tomme verdier, bruker du den nodvendige attributtet.

For jQuery-brukere er: e-post, nummer og: url-seleksjonene tilgjengelige for enkelhets skyld.

HTML5-attributter.

HTML4-attributter.

Disse gode gamle HTML4-attributter har en rolle i form validering og vil gjore skjemaene dine mer brukervennlige:

Merk: Alle ovennevnte attributter kan endres dynamisk ved hjelp av jQuery’s attr-metode. For eksempel:

I tillegg til de ovennevnte HTML-attributter, lar jQuery Tools deg a implementere dine egne tilpassede attributter for validering.

Konfigurasjon.

Feilmelding posisjonering.

Feilmeldingsposisjonen er spesifisert med to forskjellige konfigurasjonsegenskaper: posisjon og offset. Posisjonsegenskapen spesifiserer posisjonen i forhold til inngangsfeltet. For eksempel vil en verdi av «bunnsenter» plassere meldingen pa den nederste kanten av inngangen, sentrert horisontalt. Folgende bilde illustrerer «sporene» som du kan bruke:

Offset-egenskapen finjusterer verktoytipsposisjonen spesifisert med posisjonegenskapen. For eksempel beveger verdien [10, -20] verktoytipsposisjonen 10px ned og 20px til venstre. Den forste verdien modifiserer den vertikale posisjoneringen fra toppteksten til verktoylippen, og den andre verdien endrer den horisontale posisjoneringen fra venstre kant av verktoylippen. Positive verdier beveger verktoytipset nedover og til hoyre, mens negative verdier beveger verktoytipset oppover og til venstre.

Lokalisering.

Standard feilmeldinger finnes i objektet $ .tools.validator.messages. Her er et skjermbilde av alle meldingene som finnes i validatoren, sett fra Firebug-konsollen.

Standard feilmeldinger er pa engelsk. * Beskjeden vises hvis det ikke er noen validator-spesifikk melding tilgjengelig. Hvis du vil gi feilmeldinger pa andre sprak, bruker du $ .tools.validator.localize-metoden som folger:

Det forste argumentet er sprakkoden og det andre argumentet er et objekt som inneholder de lokaliserte meldingene. Etter at du har ringt lokaliseringen, kan du sjekke at alt gikk bra med Firebug-konsollen:

Den: e-post og: nummer lokaliseringer apnes. mer & hellip; Indikerer objekter som kan apnes for a inspisere lokaliserte meldinger. Som du kan se, er dette ikke tilfellet for * og: url som ikke var lokalisert. $ 1 tokens i [max] og [min] erstattes med riktige verdier nar meldingen er vist til brukeren. Du kan dra nytte av denne variabelen substitusjonsfunksjonen i dine egne tilpassede validatorer.

Na, hvis du vil bruke den finske lokaliseringen i skjemaet ditt, ma du sette lang konfigurasjonsvariabel til «fi»:

Lokalisering av en enkelt validator.

Noen ganger trenger du bare a lokalisere en enkelt valideringsfunksjon. I sa fall kan du bruke funksjonen $ .tools.validator.localizeFn. For eksempel:

Dette vil endre eksisterende sprak og / eller legge til nye for denne enkeltvalideringsenheten. Merk at med begge lokaliseringsfunksjonene kan du generere meldingene dynamisk via JavaScript hvis du trenger det. Lokaliseringsobjekter er slett gamle gamle og dynamiske JavaScript-objekter.

Inngangsspesifikke feilmelding.

Du kan eksplisitt definere feilmeldingen for et felt som vises nar validering mislykkes. Det kan defineres med data-meldingsattributtet. For eksempel:

Dette vil overstyre eventuelle andre feilmeldinger som er definert for valideringsfeilen. Ulempen her er at du bare kan levere en enkelt feilmelding, selv om det kan v re mange forskjellige valideringsfeil, og at denne feilmeldingen ikke kan lokaliseres. Selvfolgelig kan du levere en annen verdi for dette attributtet pa server-siden.

Her er rekkefolgen der feilmeldingen er valgt, startende fra trinn 1, og hvis ingen av trinnene resulterer i en feilmelding, vises det endelige alternativet.

en verdi spesifisert i datautmeldingen attributt en validator-spesifikk feilmelding som samsvarer med spraket som er spesifisert i langkonfigurasjonsalternativet, standardmeldingen som er konfigurert med stjerne (*) i objektet $ .tools.validator.messages.

Som du kanskje har lagt merke til, heter navnet pa datautmeldingsattributtet et noe tungvint datafelt. Dette gjor faktisk attributtet gyldig HTML5, og feltene dine vil vellykket passere en HTML5-validator. Hvis du er en av de menneskene som ikke bryr seg om techy standarder og vil at skjemaene dine skal v re lesbare, kan du endre navnet pa dette attributtet fra konfigurasjonen ved hjelp av konfigurasjonsvariabelen messageAttr.

Lag egendefinerte validatorer.

jQuery Tools Validator gjor det enkelt a lage nye inntastetyper og attributter. Nar du bygger skjemaene dine, bruker du vanligvis de innebygde HTML5-funksjonene, og legger ogsa til et par av dine egne tilpassede validatorer. Her er et eksempel:

Du finner flere eksempler her. Her er $ .tools.validator.fn og dens argumenter forklart:

Dette er den faktiske validatorfunksjonen som gjor jobben. Innenfor funksjonen refererer dette – variabelt til validator API. Funksjonen godtar to argumenter: Det forste argumentet gir et jQuery-objekt som representerer elementet som skal valideres, og det andre argumentet gir den ugyldige verdien. Fire typer returverdier stottes.

A returnere sant fra din validator betyr at verdien overforer valideringslogikken. En array representerer verdier for variabel substitusjon. En strengverdi representerer en feilmelding pa et bestemt sprak. Et objekt representerer en lokal feilmelding.

Som du kan se kan du levere feilmeldinger pa to mater: som det andre argumentet til $ .tools.validator.fn-funksjonen, samt ved a returnere dem fra validatorfunksjonen. Nar du leverer dem som det andre argumentet, kan du dra nytte av den sentrale sprakkonfigurasjonen der feilmeldingene kan endres og nye sprak kan legges til. Nar du returnerer feilmeldinger fra validatoren, har du mye storre kontroll over den dynamiske konstruksjonen av feilmeldingene, men meldingene er hardkodede inne i funksjonen din.

Hvis valideringsfunksjonen din gir feilmeldinger pa begge tidligere mater, har den som returneres av validatorfunksjonen, forrang.

Variabel substitusjon.

Denne funksjonen er best forklart ved hjelp av et eksempel:

Feilmeldingen gitt i det andre argumentet inneholder to erstatningstegn, $ 1 og $ 2, som vil bli utvidet til de respektive verdiene til de to medlemmene i Arrayet som returneres av validatorfunksjonen: [verdi1, verdi2].

Funksjon matcher.

I stedet for en jQuery-valjare kan du bruke en funksjon for a bestemme hvilke felt som skal valideres av din egendefinerte validator. For eksempel:

Vare matcher velger bare innganger som er innenfor et skjema med klassenavn «register». Dette er sannsynligvis ikke en ekte verdenssituasjon, men det viser deg hvordan det fungerer. Du har full kontroll over valget.

Lokalisering & amp; funksjonskamper.

Du kan sende feilmeldingen fra valideringsfunksjonen direkte. Hvis du vil dra nytte av $ .tools.validator.messages-objektet i lokaliseringen din, ma vi ha en nokkel for din kampanje. Nokkelen er gitt som en egenskap av validatorfunksjonen som folger:

Na kan du inspisere den egendefinerte validatoren i objektet $ .tools.validator.messages (siste linje):

Scripting API.

Forst ma du kontrollere at du har kjent deg med jQuery Tools-skripting.

Forst ma du kontrollere at du har lest om hendelser i jQuery-verktoy. Alle hendelselyttere mottar et hendelseobjekt som det forste argumentet.

Du kan se en demonstrasjon her om validatorhendelser.

Feltespesifikke hendelser.

Hvis du vil lytte til valideringsfeil pa feltniva, har du den ugyldige metoden tilgjengelig. For eksempel.

Server-side integrasjon.

Her tas logikken fra server-side validering demo. Vennligst les kommentarblokkene og se den naturlige og standardbaserte syntaksen.

Her brukte vi den enkle returverdi sant til a indikere at dataene var gyldige pa server-siden. Du kan gjore hva du onsker nar dataene er gode. Her erstattet vi skjemainnholdet med en server-side. Hvis dataene ikke var gyldige, bruker vi ugyldighetsmetoden til a vise feil til brukeren. Invalidiseringsmetoden aksepterer et objektargument som kartlegger et feltnavn til en feilmelding som dette:

Du kan bytte sprak pa feilene pa serveren. Merk: jQuery 1.4+ krever at bade etiketter og verdier er oppgitt med dobbelte anforselstegn pa den returnerte JSON.

Gjor tilpassede effekter.

Standardvalideringseffekten er ansvarlig for a vise valideringsfeil ved siden av hvert inntastingsfelt, og nar brukeren loser problemene, skjuler effekten de tilhorende feilmeldingene tilsvarende. Hvis du vil endre denne oppforselen, kan du skrive din egen egendefinerte validator effekt. For eksempel vil du kanskje vise disse feilene i en enkelt beholder i stedet for ved siden av hvert innskriftsfelt.

Tilpassede effekter legges til med $ .tools.validator.addEffect-metoden. Denne metoden aksepterer tre argumenter. Det forste argumentet er effektnavnet, det andre argumentet er en funksjon som kalles nar det finnes valideringsfeil, og det tredje argumentet er en funksjon som kalles nar et inngangsfelt bytter fra en ugyldig til en gyldig tilstand. Her er et eksempel:

Show-funksjonen mottar to argumenter. Det forste argumentet er en rekke feilobjekter. Hvert feilobjekt har to egenskaper: Inndata, som er feilinngangen, og meldinger som er en rekke feilmeldinger. Det andre argumentet er hendelsen som avfodte valideringen. Dette kan v re skjemainnsendelsen eller en endring i et inntastingsfelt.

Skjulfunksjonen mottar et jQuery-objekt som inneholder alle inngangsfelt som bytter til en gyldig tilstand etter at den er ugyldig.

Ta en titt pa en enkel egendefinert validator-effekt i aksjon.