» men gjør ikke jQuery det enkelt å skrive din egen validering plugin?»Ja, Men det er fortsatt mange finesser å ta vare på: Du trenger et standardbibliotek med valideringsmetoder (for eksempel e-Post, Nettadresser, kredittkortnumre). Du må plassere feilmeldinger I DOM og vise og skjule dem når det passer. Du ønsker å reagere på mer enn bare en send hendelse, som keyup og blur.
du må kanskje forskjellige måter å angi valideringsregler i henhold til server-side miljø du bruker på ulike prosjekter. Og tross alt, du ønsker ikke å finne opp hjulet, gjør du?

«men er det ikke allerede massevis av validering plugins der ute?»Det Er Mange ikke-jQuery-baserte løsninger (som du vil unngå siden du fant jQuery) og noen jQuery-baserte løsninger. Denne spesielle er en av de eldste jquery plugins (startet i juli 2006) og har vist seg i prosjekter over hele verden. Det er også en artikkel diskutere hvordan denne plugin passer regningen av bør-være valideringsløsning.

Ikke overbevist? Ta en titt på dette eksemplet:

<form class="cmxform" method="get" action="">
 <fieldset>
 <legend>Please provide your name, email address (won't be published) and a comment</legend>
 <p>
 <label for="cname">Name (required, at least 2 characters)</label>
 <input name="name" minlength="2" type="text" required>
 </p>
 <p>
 <label for="cemail">E-Mail (required)</label>
 <input type="email" name="email" required>
 </p>
 <p>
 <label for="curl">URL (optional)</label>
 <input type="url" name="url">
 </p>
 <p>
 <label for="ccomment">Your comment (required)</label>
 <textarea name="comment" required></textarea>
 </p>
 <p>
 <input class="submit" type="submit" value="Submit">
 </p>
 </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

link er ikke det fint og enkelt?

en enkelt linje av jQuery å velge skjemaet og bruke validering plugin, pluss noen merknader på hvert element for å angi valideringsregler.

selvfølgelig er det ikke den eneste måten å spesifisere regler på. Du trenger heller ikke å stole på disse standardmeldingene, men de kommer til nytte når du begynner å sette opp validering for et skjema.

link et par ting å se opp for når du spiller rundt med demoen

• etter å ha prøvd å sende inn et ugyldig skjema, er det første ugyldige elementet fokusert, slik at brukeren kan rette feltet. Hvis et annet ugyldig felt – som ikke var det første – var fokusert før innsending, er dette feltet fokusert i stedet, slik at brukeren kan starte nederst hvis han eller hun foretrekker det.
• før et felt er merket som ugyldig, er valideringen lat: før du sender inn skjemaet for første gang, kan brukeren bla gjennom felt uten å få irriterende meldinger-de vil ikke bli avlyttet før du har sjansen til å faktisk angi en riktig verdi
• Når et felt er merket ugyldig, er det ivrig validert: Så snart brukeren har angitt den nødvendige verdien, fjernes feilmeldingen
• hvis brukeren skriver inn noe i et ikke-merket felt, og faner / klikk unna det (slør feltet), er det validert – åpenbart brukeren hadde til hensikt å skrive inn noe, men klarte ikke å angi riktig verdi

at atferden kan være irriterende når du klikker gjennom demoer av valideringsplugin – den er designet for en diskret brukeropplevelse, irriterende brukeren så lite som mulig med unødvendige feilmeldinger. Så når du prøver ut andre demoer, prøv å reagere som en av brukerne ville, og se om oppførselen er bedre da. Hvis ikke, vennligst gi meg beskjed om noen ideer du måtte ha for forbedringer!

link API-Dokumentasjon

du leter sannsynligvis etter

koblingsalternativer for valideringsmetoden ()

hvis ikke, les videre.

gjennom dokumentasjonen brukes to begreper veldig ofte, så det er viktig at du kjenner deres mening i sammenheng med valideringspluggen:

• – metoden: En valideringsmetode implementerer logikken for å validere et element, for eksempel en e-postmetode som sjekker for riktig format for en tekstinndataverdi. Et sett med standardmetoder er tilgjengelig, og det er enkelt å skrive din egen.
• regel: en valideringsregel knytter et element til en valideringsmetode, som «valider inndata med navn» primær-post «med metodene» påkrevd «og»e-post».

link Plugin metoder

dette biblioteket legger tre jquery plugin metoder, den viktigste inngangspunkt blirvalidate metode:

• validate() – Validerer det valgte skjemaet.
• valid() – Kontrollerer om det valgte skjemaet eller de valgte elementene er gyldige.
• rules() – Les, legg til og fjern regler for et element.

link Custom selectors

dette biblioteket utvider også jQuery med tre custom selectors:

• :blank – Velger alle elementer med en tom verdi.
• :filled – Velger alle elementer med en fylt verdi.
• :unchecked – Velger alle elementer som ikke er merket.

link Validator

valideringsmetoden returnerer Et Validatorobjekt som har noen offentlige metoder som du kan bruke til å utløse validering programmatisk eller endre innholdet i skjemaet. Validator-objektet har flere metoder, men bare de som er dokumentert her, er ment for bruk.

• Validator.form() – Validerer skjemaet.
• Validator.element() – Validerer et enkelt element.
• Validator.resetForm() – Tilbakestiller det kontrollerte skjemaet.
• Validator.showErrors() – Vis de angitte meldingene.
• Validator.numberOfInvalids() – Returnerer antall ugyldige felt.
• Validator.destroy() – Ødelegger denne forekomsten av validator.

det er noen statiske metoder på validatorobjektet:

• jQuery.validator.addMethod() – Legg til en tilpasset valideringsmetode.
• jQuery.validator.format() – Erstatter {n} plassholdere med argumenter.
• jQuery.validator.setDefaults() – Endre standardinnstillinger for validering.
• jQuery.validator.addClassRules() – Legg til en sammensatt klassemetode.

link Liste over innebygde Valideringsmetoder

et sett med standard valideringsmetoder er gitt:

• required – Gjør elementet nødvendig –
• remote – Ber om en ressurs for å sjekke elementet for gyldighet.
• minlength – Gjør at elementet krever en gitt minimumslengde.
• maxlength – Gjør at elementet krever en gitt maksimal lengde.
• rangelength – Gjør at elementet krever et gitt verdiområde.
• min – Gjør at elementet krever et gitt minimum.
• max – Gjør at elementet krever et gitt maksimum.
• range – Gjør at elementet krever et gitt verdiområde.
• step – Gjør at elementet krever et gitt trinn.

email – Gjør at elementet krever en gyldig e-post

• url – Gjør at elementet krever en gyldig url
• date – Gjør at elementet krever en dato.
• dateISO – Gjør at elementet krever EN ISO-dato.
• number – Gjør at elementet krever et desimalnummer.
• digits – Gjør at elementet bare krever sifre.
• equalTo – Krever at elementet er det samme som en annen

Noen flere metoder leveres som tillegg, og er for tiden inkludert i tilleggsmetoder.js i nedlastingspakken. Ikke alle av dem er dokumentert her:

• accept – Gjør en filopplasting godtar bare angitte mime-typer.
• creditcard – Gjør at elementet krever et kredittkortnummer.
• extension – Gjør at elementet krever en bestemt filtype.
• phoneUS – Valider for gyldig amerikansk telefonnummer.
• require_from_group – Sikrer at et gitt antall felt i en gruppe er fullført.

du kan finne kildekoden for alle tilleggsmetoder i GitHub-depotet.

det er mulig å redefinere implementeringen av de innebygde reglene ved hjelp av $.validator.methods eiendom

link Generelle Retningslinjer

Den Generelle Retningslinjer delen gir detaljert diskusjon av design og ideer bak plugin, forklarer hvorfor visse ting er som de er. Den dekker funksjonene mer detaljert ENN API-dokumentasjonen, som bare kort forklarer de ulike metodene og alternativene som er tilgjengelige.

hvis du har bestemt deg for å bruke valideringspluggen i søknaden din og ønsker å bli bedre kjent med den, anbefales det at du leser retningslinjene.

link Felt med komplekse navn (parentes, prikker)

når du har et navneattributt som bruker, sørg for å sette navnet i anførselstegn. Flere detaljer i De Generelle Retningslinjene.

koble For mye rekursjon

Et annet vanlig problem oppstår med denne koden:

 $("#myform").validate({
 submitHandler: function(form) {
 // some other code
 // maybe disabling submit button
 // then:
 $(form).submit();
 }
 });

dette resulterer i en for mye rekursjonsfeil:$(form).submit()utløser en annen valideringsrunde, noe som resulterer i et annet kall til submithandler, og voila, rekursjon. Erstatt det med form.send (), som utløser den innfødte send-hendelsen i stedet og ikke valideringen.

så den riktige koden ser litt annerledes ut:

 $("#myform").validate({
 submitHandler: function(form) {
 form.submit();
 }
 });

koble marketo registreringsskjema

koble marketo registreringsskjema, trinn 2

basert på en gammel versjon av marketo.com påmeldingsskjema. Den tilpassede validering ble en gang erstattet med denne plugin. Takk Til Glen Lipka for å bidra med det!

Kjente funksjoner i demoen:

• Tilpasset meldingsvisning: ingen meldinger vises for den nødvendige metoden, bare for skrivefeil( som feil e-postformat); et sammendrag vises øverst («du savnet 12 felt. De har blitt fremhevet nedenfor.»)
• Ekstern validering av e-feltet. Prøv å skrive inn f.eks.
• Integrasjon med masked-input plugin, se Zip og Telefon felt og Kredittkortnummer på trinn 2
• en tilpasset metode for å gjøre faktureringsadressen på trinn 2 valgfritt når» Samme Som Firmaadresse » er merket
• en tilpasset metode for å sjekke passordet: Kontrollerer at passordet inneholder minst ett tall og ett tegn, og at det er minst 6 tegn langt. Hvis brukeren visker ut feltet med en ugyldig verdi, tømmes inngangen og får fokus igjen.

koble Til Husk Påmeldingsskjemaet for Melk

påmeldingsskjemaet fra rememberthemilk.com (basert på en eldre versjon). Den tilpassede validering ble erstattet ved hjelp av denne plugin. Takk TIL RTM for å bidra!

Kjente funksjoner i demoen:

• Tilpasset meldingsvisning, basert på det opprinnelige tabelloppsettet, ved hjelp av suksessalternativ for å vise et merke for gyldige felt
• Ekstern validering av brukernavn, for å sjekke om det allerede er tatt (prøv «Peter», «Asdf» eller «George»)

link a multipart «buy&selg et hus» form

Bidratt Av Michael Evangelista, viser en multipart skjema for kjøp Og salg av hus.

Kjente funksjoner i demoen:Multipart, implementert ved hjelp av jquery ui trekkspill og en tilpasset metode for å sjekke om et element er på gjeldende side når validert Integrasjon med masked-input plugin, se Telefon og Zip felt

kobling Ved hjelp av ekstern validering for å hjelpe med s

funksjoner ekstern validering For å hjelpe brukeren til å fylle ut s.

Bemerkelsesverdige funksjoner i demoen:

• Ekstern validering for å sjekke om brukeren angitt riktig , uten å tvinge ham Til å sende Inn Skjemaet Først