“men gør det ikke nemt at skrive dit eget Validering plugin?”
jo da, men der er stadig mange finesser at tage sig af: du har brug for et standardbibliotek med valideringsmetoder (såsom e-mails, URL ‘ er, kreditkortnumre). Du skal placere fejlmeddelelser i DOM og vise og skjule dem, når det er relevant. Du ønsker at reagere på mere end blot en indsende begivenhed, ligesom keyup og blur.
Du kan have brug for forskellige måder at angive valideringsregler i henhold til server-side miljø, du bruger på forskellige projekter. Og når alt kommer til alt vil du ikke genopfinde hjulet, gør du?

” men er der ikke allerede masser af Validering plugins derude?”
højre, der er en masse ikke-JKR-baserede løsninger (som du ville undgå, da du fandt JKR-baserede løsninger) og nogle JKR-baserede løsninger. Denne særlige er en af de ældste plugins (startede i juli 2006) og har vist sig i projekter over hele verden. Der er også en artikel, der diskuterer, hvordan dette plugin passer til regningen for den bør-være valideringsløsning.

ikke overbevist? Tag et kig på dette eksempel:

<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 det ikke rart og nemt?

en enkelt linje med anmodning om at vælge formularen og anvende valideringspluginet plus et par kommentarer på hvert element for at specificere valideringsreglerne.

det er selvfølgelig ikke den eneste måde at specificere regler på. Du behøver heller ikke at stole på disse standardmeddelelser, men de er nyttige, når du begynder at konfigurere validering for en formular.

link et par ting, du skal passe på, når du spiller rundt med demoen

• efter at have forsøgt at indsende en ugyldig formular, er det første ugyldige element fokuseret, så brugeren kan rette feltet. Hvis et andet ugyldigt felt – det var ikke det første – var fokuseret før indsendelse, er dette felt fokuseret i stedet, så brugeren kan starte i bunden, hvis han eller hun foretrækker det.
• før et felt er markeret som ugyldigt, er valideringen doven: før du sender formularen for første gang, kan brugeren fane gennem felter uden at få irriterende meddelelser – de bliver ikke aflyttet, før de har chancen for faktisk at indtaste en korrekt værdi
• når et felt er markeret ugyldigt, valideres det ivrigt: Så snart brugeren har indtastet den nødvendige værdi, fjernes fejlmeddelelsen
• hvis brugeren indtaster noget i et ikke-markeret felt og faner/klik væk fra det (sløre feltet), valideres det – selvfølgelig havde brugeren til hensigt at indtaste noget, men undlod at indtaste den korrekte værdi

at adfærd kan være irriterende, når man klikker gennem demoer i valideringspluginet – det er designet til en diskret brugeroplevelse, der irriterer brugeren så lidt som muligt med unødvendige fejlmeddelelser. Så når du prøver andre demoer, prøv at reagere som en af dine brugere ville, og se om adfærden er bedre da. Hvis ikke, så lad mig vide om eventuelle ideer, du måtte have til forbedringer!

link API-dokumentation

du leder sandsynligvis efter

linkindstillinger til validere () – metoden

Hvis ikke, læs videre.

i hele dokumentationen bruges to udtryk meget ofte, så det er vigtigt, at du kender deres betydning i forbindelse med valideringspluginet:

• metode: En valideringsmetode implementerer logikken til at validere et element, som en e-mail-metode, der kontrollerer det rigtige format for en tekstinputværdi. Et sæt standardmetoder er tilgængelige, og det er nemt at skrive dit eget.
• regel: en valideringsregel knytter et element til en valideringsmetode, som “valider input med navn “primær-mail” med metoder “påkrævet” og “e-mail”.

link Plugin-metoder

dette bibliotek tilføjer tre plugin-metoder, hvor hovedindgangspunktet er validate metode:

• validate() – validerer den valgte formular.
• valid() – kontrollerer, om den valgte formular eller de valgte elementer er gyldige.
• rules() – Læs, Tilføj og fjern regler for et element.

link brugerdefinerede vælgere

dette bibliotek udvider også forespørgsel med tre brugerdefinerede vælgere:

• :blank – vælger alle elementer med en tom værdi.
• :filled – vælger alle elementer med en udfyldt værdi.
• :unchecked – vælger alle elementer, der ikke er markeret.

link Validator

valideringsmetoden returnerer et Valideringsobjekt, der har et par offentlige metoder, som du kan bruge til at udløse Validering programmatisk eller ændre indholdet af formularen. Validatorobjektet har flere metoder, men kun de dokumenterede her er beregnet til brug.

• Validator.form() – validerer formularen.
• Validator.element() – validerer et enkelt element.
• Validator.resetForm() – nulstiller den kontrollerede form.
• Validator.showErrors() – Vis de angivne meddelelser.
• Validator.numberOfInvalids() – Returnerer antallet af ugyldige felter.
• Validator.destroy() – ødelægger denne forekomst af validator.

Der er et par statiske metoder på validatorobjektet:

• jQuery.validator.addMethod() – Tilføj en brugerdefineret valideringsmetode.
• jQuery.validator.format() – erstatter {n} pladsholdere med argumenter.
• jQuery.validator.setDefaults() – Rediger standardindstillinger til validering.
• jQuery.validator.addClassRules() – Tilføj en sammensat klasse metode.

Linkliste over indbyggede valideringsmetoder

der leveres et sæt standardvalideringsmetoder:

• required-gør det nødvendige element.
• remote – anmoder om en ressource for at kontrollere elementet for gyldighed.
• minlength – gør elementet kræver en given minimumslængde.
• maxlength – gør elementet kræver en given maksimal længde.
• rangelength – gør elementet kræver et givet værdiområde.
• min – gør elementet kræver et givet minimum.
• max – gør elementet kræver et givet maksimum.
• range – gør elementet kræver et givet værdiområde.
• step – gør elementet kræver et givet trin.
• email – får elementet til at kræve en gyldig e – mail
• url – får elementet til at kræve en gyldig url
• date – får elementet til at kræve en dato.
• dateISO – får elementet til at kræve en ISO-dato.
• number – gør elementet kræver et decimaltal.
• digits – gør elementet kræver kun cifre.
• equalTo – kræver, at elementet er det samme som et andet

nogle flere metoder leveres som tilføjelser og er i øjeblikket inkluderet i yderligere metoder.js i pakken Hent. Ikke alle af dem er dokumenteret her:

• accept – gør en fil upload acceptere kun angivne mime-typer.
• creditcard – gør elementet kræver et kreditkortnummer.
• extension – gør elementet kræver en bestemt filtypenavn.
• phoneUS – Valider for gyldigt amerikansk telefonnummer.
• require_from_group – sikrer, at et givet antal felter i en gruppe er komplette.

Du kan finde kildekoden for alle yderligere metoder i GitHub-depotet.

det er muligt at omdefinere implementeringen af de indbyggede regler ved hjælp af$.validator.methods ejendom

link generelle retningslinjer

afsnittet Generelle retningslinjer giver detaljeret diskussion af designet og ideerne bag pluginet og forklarer, hvorfor visse ting er som de er. Det dækker funktionerne mere detaljeret end API-dokumentationen, som bare kort forklarer de forskellige tilgængelige metoder og muligheder.

Hvis du har besluttet at bruge valideringspluginet i din applikation og vil lære det bedre at kende, anbefales det, at du læser retningslinjerne.

link felter med komplekse navne (parenteser, prikker)

når du har en navneattribut som bruger, skal du sørge for at sætte navnet i anførselstegn. Flere detaljer i de generelle retningslinjer.

link for meget rekursion

et andet almindeligt problem opstår med denne kode:

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

dette resulterer i en for meget rekursionsfejl:$(form).submit() udløser endnu en valideringsrunde, hvilket resulterer i endnu et opkald til submithandler og voila, rekursion. Udskift det med form.Send (), som udløser den oprindelige sendehændelse i stedet og ikke valideringen.

så den korrekte kode ser lidt anderledes ud:

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

link Marketo-tilmeldingsformularen

link Marketo-tilmeldingsformularen, trin 2

baseret på en gammel version af marketo.com tilmeldingsformular. Den brugerdefinerede Validering blev engang erstattet med dette plugin. Tak til Glen Lipka for at bidrage med det!

bemærkelsesværdige funktioner i demoen:

• tilpasset meddelelsesvisning: ingen meddelelser vises for den krævede metode, kun til skrivefejl (som forkert e-mail-format); en oversigt vises øverst (“du gik glip af 12 felter. De er blevet fremhævet nedenfor.”)
• Fjernvalidering af e-mail-felt. Prøv at indtaste f. eks.
• Integration med masked-input plugin, se lynlås-og Telefonfelter og kreditkortnummer på trin 2
• en brugerdefineret metode til at gøre faktureringsadressen på trin 2 valgfri, når” samme som Virksomhedsadresse ” er markeret
• en brugerdefineret metode til kontrol af adgangskoden: Kontrollerer, at adgangskoden indeholder mindst et tal og et tegn, og at det er mindst 6 tegn langt. Hvis brugeren slører feltet med en ugyldig værdi, tømmes input og får fokus igen.

link husk mælk tilmeldingsformularen

tilmeldingsformularen fra rememberthemilk.com (baseret på en ældre version). Den brugerdefinerede Validering blev erstattet ved hjælp af dette plugin. Tak til RTM for at bidrage!

bemærkelsesværdige funktioner i demoen:

• brugerdefineret meddelelsesvisning, baseret på det originale Tabellayout, ved hjælp af succes mulighed for at vise et flueben for gyldige felter
• fjernvalidering af brugernavn, for at kontrollere, om det allerede er taget (prøv “Peter”, “asdf” eller “George”)

link en multipart “køb&Sælg et hus” form

bidraget af Michael Evangelista, der viser en multipart formular til køb og salg af huse.

bemærkelsesværdige funktioner i demoen:en brugerdefineret metode til at kontrollere, om et element er på den aktuelle side, når det er valideret

link ved hjælp af fjernvalidering for at hjælpe med s

funktioner fjernvalidering for at hjælpe brugeren med at udfylde s.

bemærkelsesværdige funktioner i demoen:

• Fjernvalidering for at hjælpe kontroller, om brugeren indtastede den korrekte, uden at tvinge ham til at indsende formularen først