”men gör inte jQuery det enkelt att skriva ditt eget valideringsplugin?”
visst, men det finns fortfarande många finesser att ta hand om: du behöver ett standardbibliotek med valideringsmetoder (som e-post, webbadresser, kreditkortsnummer). Du måste placera felmeddelanden i DOM och visa och dölja dem när det är lämpligt. Du vill reagera på mer än bara en skicka händelse, som keyup och blur.
Du kan behöva olika sätt att ange valideringsregler enligt serversidan miljö du använder på olika projekt. Och trots allt vill du inte uppfinna hjulet på nytt, eller hur?

” men finns det inte redan massor av valideringsplugin där ute?”
rätt, det finns många icke-jQuery-baserade lösningar (som du skulle undvika sedan du hittade jQuery) och några jQuery-baserade lösningar. Den här är en av de äldsta jQuery-pluginsna (startade i juli 2006) och har visat sig i projekt över hela världen. Det finns också en artikel som diskuterar hur detta plugin passar räkningen av bör-vara valideringslösning.

inte övertygad? Ta en titt på det här exemplet:

<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>

länk är inte så trevligt och enkelt?

en enda rad jQuery för att välja formuläret och tillämpa valideringsplugin, plus några anteckningar på varje element för att ange valideringsreglerna.

naturligtvis är det inte det enda sättet att ange regler. Du behöver inte heller lita på dessa standardmeddelanden, men de är praktiska när du börjar konfigurera validering för ett formulär.

länka några saker att se upp för när du spelar runt med demo

• efter att ha försökt att skicka in en ogiltig form, är det första ogiltiga elementet fokuserat, så att användaren kan korrigera fältet. Om ett annat ogiltigt fält – det var inte det första – fokuserades före submit, fokuseras det fältet istället, så att användaren kan börja längst ner om han eller hon föredrar.
• innan ett fält markeras som ogiltigt är valideringen lat: innan du skickar in formuläret för första gången kan användaren flika igenom fält utan att få irriterande meddelanden – de kommer inte att bli buggade innan de har chansen att faktiskt ange ett korrekt värde
• när ett fält är markerat ogiltigt valideras det ivrigt: Så snart användaren har angett det nödvändiga värdet tas felmeddelandet bort
• Om användaren anger något i ett icke-markerat fält och flikar/klick bort från det (oskärpa fältet) valideras det – uppenbarligen hade användaren avsikt att ange något, men misslyckades med att ange rätt värde

det beteendet kan vara irriterande när man klickar igenom demos av valideringspluginet – det är utformat för en diskret användarupplevelse, vilket irriterar användaren så lite som möjligt med onödiga felmeddelanden. Så när du provar andra demos, försök att reagera som en av dina användare skulle, och se om beteendet är bättre då. Om inte, vänligen meddela mig om eventuella förslag Du kan ha för förbättringar!

länk API dokumentation

du letar förmodligen efter

länkalternativ för validera () – metoden

om inte, läs vidare.

under hela dokumentationen används två termer mycket ofta, så det är viktigt att du känner till deras betydelse i samband med valideringsplugin:

• – metoden: En valideringsmetod implementerar logiken för att validera ett element, som en e-postmetod som kontrollerar rätt format för en textinmatningsvärde. En uppsättning standardmetoder är tillgängliga, och det är lätt att skriva din egen.
• regel: en valideringsregel associerar ett element med en valideringsmetod, som ”validera inmatning med namn ”primärpost” med metoder ”krävs” och ”e-post”.

länk Plugin metoder

detta bibliotek lägger till tre jQuery plugin metoder, den viktigaste ingångspunkten ärvalidate metod:

• validate() – validerar det valda formuläret.
• valid() – kontrollerar om det valda formuläret eller de valda elementen är giltiga.
• rules() – Läs, Lägg till och ta bort regler för ett element.

länk anpassade väljare

detta bibliotek utökar också jQuery med tre anpassade väljare:

• :blank – väljer alla element med ett tomt värde.
• :filled – markerar alla element med ett fyllt värde.
• :unchecked – markerar alla element som inte är markerade.

link Validator

validera-metoden returnerar ett Validatorobjekt som har några offentliga metoder som du kan använda för att utlösa validering programmatiskt eller ändra innehållet i formuläret. Validatorobjektet har fler metoder, men endast de som dokumenteras här är avsedda för användning.

• Validator.form() – validerar formuläret.
• Validator.element() – validerar ett enda element.
• Validator.resetForm() – återställer den kontrollerade formen.
• Validator.showErrors() – visa de angivna meddelandena.
• Validator.numberOfInvalids() – Returnerar antalet ogiltiga fält.
• Validator.destroy() – förstör denna instans av validator.

det finns några statiska metoder på validatorobjektet:

• jQuery.validator.addMethod() – Lägg till en anpassad valideringsmetod.
• jQuery.validator.format() – ersätter {n} platshållare med argument.
• jQuery.validator.setDefaults() – ändra standardinställningarna för validering.
• jQuery.validator.addClassRules() – Lägg till en sammansatt klassmetod.

länklista över inbyggda valideringsmetoder

en uppsättning standardvalideringsmetoder tillhandahålls:

• required – gör elementet nödvändigt.
• remote – begär en resurs för att kontrollera elementet för giltighet.
• minlength – gör att elementet kräver en given minsta längd.
• maxlength – gör att elementet kräver en given maximal längd.
• rangelength – gör att elementet kräver ett givet värdeområde.
• min – gör att elementet kräver ett givet minimum.
• max – gör att elementet kräver ett givet maximum.
• range – gör att elementet kräver ett givet värdeområde.
• step – gör att elementet kräver ett givet steg.
• email div – – gör elementet kräver en giltig e-post
• url – gör elementet kräver en giltig url
• date – gör elementet kräver ett datum.
• dateISO – gör att elementet kräver ett ISO-datum.
• number – gör att elementet kräver ett decimaltal.
• digits – gör att elementet endast kräver siffror.
• equalTo – kräver att elementet är detsamma som en annan

vissa fler metoder tillhandahålls som tillägg och ingår för närvarande i ytterligare metoder.js I nedladdningspaketet. Inte alla är dokumenterade här:

• accept – gör en filuppladdning accepterar endast angivna mime-typer.
• creditcard – gör elementet kräver ett kreditkortsnummer.
• extension – gör att elementet kräver en viss filtillägg.
• phoneUS – validera för giltigt amerikanskt telefonnummer.
• require_from_group – säkerställer att ett visst antal fält i en grupp är klara.

Du hittar källkoden för alla ytterligare metoder i GitHub-förvaret.

det är möjligt att omdefiniera implementeringen av de inbyggda reglerna med hjälp av$.validator.methods egenskapen

länk allmänna riktlinjer

avsnittet Allmänna riktlinjer ger detaljerad diskussion om designen och ideerna bakom plugin och förklarar varför vissa saker är som de är. Den täcker funktionerna mer detaljerat än API-dokumentationen, som bara kort förklarar de olika metoderna och alternativen som finns tillgängliga.

Om du har bestämt dig för att använda valideringspluginet i din applikation och vill lära känna det bättre, rekommenderas att du läser riktlinjerna.

länkfält med komplexa namn (parenteser, prickar)

När du har ett namnattribut som användare, se till att sätta namnet i citat. Mer detaljer i de allmänna riktlinjerna.

länk för mycket rekursion

ett annat vanligt problem uppstår med den här koden:

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

detta resulterar i ett för mycket rekursionsfel: $(form).submit() utlöser en annan valideringsrunda, vilket resulterar i ett annat samtal till submithandler och voila, rekursion. Ersätt det med formulär.skicka (), vilket utlöser den ursprungliga skicka händelsen istället och inte valideringen.

så den korrekta koden ser lite annorlunda ut:

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

länka Marketo sign-up form

länka Marketo sign-up form, steg 2

baserat på en gammal version av marketo.com anmälningsformulär. Den anpassade valideringen ersattes en gång med detta plugin. Tack till Glen Lipka för att bidra med det!

anmärkningsvärda funktioner i demo:

• Anpassad meddelandevisning: inga meddelanden visas för önskad metod, endast för skrivfel (som fel E-postformat); en sammanfattning visas högst upp (”du missade 12 fält. De har lyfts fram nedan.”)
• Fjärrvalidering av e-postfältet. Försök att ange t.ex.
• Integration med maskerad inmatning plugin, se Zip och Telefonfält och kreditkortsnummer på Steg 2
• en anpassad metod för att göra faktureringsadressen på Steg 2 valfri när”samma som företagsadress” är markerad
• en anpassad metod för att kontrollera lösenordet: Kontrollerar att lösenordet innehåller minst ett nummer och ett tecken och att det är minst 6 tecken långt. Om användaren suddar ut fältet med ett ogiltigt värde töms inmatningen och får fokus igen.

länk kom ihåg Mjölkregistreringsformuläret

registreringsformuläret från rememberthemilk.com (baserat på en äldre version). Den anpassade valideringen ersattes med detta plugin. Tack till RTM för att bidra!

anmärkningsvärda funktioner i demo:

• Anpassad meddelandevisning, baserat på den ursprungliga tabelllayouten, med hjälp av framgångsalternativ för att visa en bock för giltiga fält
• Fjärrvalidering av användarnamn, för att kontrollera om det redan är taget (försök ”Peter”, ”asdf” eller ”George”)

länka en multipart ”köp&Sälj ett hus” form

bidragit med Michael Evangelista, visar en multipartform för att köpa och sälja hus.

anmärkningsvärda funktioner i demo:

• Multipart, implementerad med jQuery UI dragspel och en anpassad metod för att kontrollera om ett element finns på den aktuella sidan när validerad
• Integration med maskerad inmatning plugin, Se telefon-och Zip-fält

länk med fjärrvalidering för att hjälpa till med s

funktioner fjärrvalidering för att hjälpa användaren att fylla i S.

anmärkningsvärda funktioner i demo:

• fjärrvalidering för att kontrollera om användaren har Ange rätt , utan att tvinga honom att skicka in formuläret först