„Ale neznamená, jQuery, aby bylo snadné napsat vlastní validační plugin?“
jistě, ale stále existuje mnoho jemností, o které se musíte postarat: potřebujete standardní knihovnu metod validace(například e-maily, adresy URL, čísla kreditních karet). Musíte umístit chybové zprávy do DOM a v případě potřeby je zobrazit a skrýt. Chcete reagovat na více než jen odeslat událost, jako keyup a blur.
možná budete potřebovat různé způsoby, jak určit pravidla validace podle prostředí na straně serveru, které používáte v různých projektech. A koneckonců, nechcete znovu objevit kolo, že ne?

“ ale není tam již spousta ověřovacích pluginů?“
správně, existuje spousta řešení, která nejsou založena na jQuery (kterým byste se vyhnuli, protože jste našli jQuery) a některá řešení založená na jQuery. Tento konkrétní je jedním z nejstarších pluginů jQuery (zahájených v červenci 2006) a osvědčil se v projektech po celém světě. K dispozici je také článek o tom, jak tento plugin zapadá do návrhu zákona o validačním řešení.

nejste přesvědčeni? Podívejte se na tento příklad:

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

odkaz Není to příjemné a snadné?

jeden řádek jQuery pro výběr formuláře a použití validačního pluginu, plus několik anotací na každém prvku pro určení pravidel validace.

samozřejmě to není jediný způsob, jak určit pravidla. Také se nemusíte spoléhat na tyto výchozí zprávy, ale hodí se při spuštění ověření nastavení formuláře.

odkaz pár věcí dávat pozor při hraní si s demo

• Poté, co se snaží odeslat neplatný formulář, první neplatný prvek je zaměřen, což umožňuje uživateli správné oblasti. Pokud bylo před odesláním zaměřeno jiné neplatné pole – to nebylo první–, toto pole je místo toho zaměřeno, což uživateli umožňuje začít dole, pokud dává přednost.
• Před pole je označena jako neplatná, validace je líný: Před odesláním formuláře pro první čas, může uživatel tab přes pole, aniž by se nepříjemné zprávy – nebudou mít štěnice, než mají šanci vlastně zadejte správnou hodnotu
• Jakmile je pole je neplatný, je dychtivě ověřena: Jakmile uživatel zadal potřebné hodnoty, chybová zpráva je odstraněna
• Pokud uživatel zadá něco, co v non-označené pole, a karty/kliknutí (rozostření pole), je to ověřené – je zřejmé, že uživatel měl v úmyslu zadat něco, ale nepodařilo zadat správnou hodnotu

toto chování může být nepříjemné, když se kliknutím přes ukázky validace plugin – je určen pro nenápadný uživatelské zkušenosti, nepříjemné uživateli, tak málo, jak je to možné s zbytečné chybové zprávy. Když tedy vyzkoušíte další ukázky, zkuste reagovat jako jeden z vašich uživatelů, a zjistěte, zda je chování lepší. Pokud ne, dejte mi prosím vědět o jakýchkoli nápadech, které můžete mít pro zlepšení!

link API Documentation

pravděpodobně hledáte

možnosti propojení pro metodu validate ()

Pokud ne, čtěte dále.

v celé dokumentaci se velmi často používají dva termíny, takže je důležité znát jejich význam v kontextu validačního pluginu: metoda

• : Validační metoda implementuje logiku pro ověření prvku, jako je e-mailová metoda, která kontroluje správný formát hodnoty textového vstupu. K dispozici je sada standardních metod a je snadné napsat vlastní.
• pravidlo: Validační pravidlo spojuje prvek s validační metodou, například „ověřit vstup s názvem“ primární pošta „s metodami“ povinné “ a „e-mail“.

odkaz Plugin metody

Tato knihovna přidává tři jQuery plugin metody, hlavní vstupní bod je validate metoda:

• validate() – ověřuje vybraný formulář.
• valid() – kontroluje, zda je vybraný formulář nebo vybrané prvky platné.
• rules() – čtení, přidávání a odebírání pravidel pro prvek.

odkaz Vlastní selektory

Tato knihovna také rozšiřuje jQuery s tři vlastní selektory:

• :blank – Vybere všechny prvky s prázdnou hodnotu.
• :filled – vybere všechny prvky s vyplněnou hodnotou.
• :unchecked – vybere všechny prvky, které nejsou zaškrtnuty.

link Validator

validate metoda vrátí Validator objekt, který má několik veřejných metod, které můžete použít ke spuštění validace programově nebo změnit obsah formuláře. Objekt validátoru má více metod, ale pouze ty, které jsou zde zdokumentovány, jsou určeny k použití.

• Validator.form() – ověřuje formulář.
• Validator.element() – ověřuje jeden prvek.
• Validator.resetForm() – resetuje řízený formulář.
• Validator.showErrors() – Zobrazit zadané zprávy.
• Validator.numberOfInvalids() – vrací počet neplatných polí.
• Validator.destroy() – zničí tuto instanci validátoru.

na objektu validátoru je několik statických metod:

• jQuery.validator.addMethod() – Přidejte vlastní metodu validace –
• jQuery.validator.format() – nahrazuje {n} zástupné symboly argumenty.
• jQuery.validator.setDefaults() – upravte výchozí nastavení pro ověření.
• jQuery.validator.addClassRules() – přidejte metodu složené třídy.

seznam odkazů vestavěných validačních metod

je k dispozici sada standardních validačních metod:

• required – vyžaduje prvek.
• remote – požaduje zdroj pro kontrolu platnosti prvku.
• minlength – způsobí, že prvek vyžaduje danou minimální délku.
• maxlength – způsobí, že prvek vyžaduje danou maximální délku.
• rangelength – způsobí, že prvek vyžaduje daný rozsah hodnot.
• min – umožňuje, aby prvek vyžadoval dané minimum.
• max – způsobí, že prvek vyžaduje dané maximum.
• range – způsobí, že prvek vyžaduje daný rozsah hodnot.
• step – způsobí, že prvek vyžaduje daný krok.
• email – je prvek vyžaduje platný e-mail
• url – je prvek vyžadují platná adresa url
• date – je prvek vyžadují data.
• dateISO – způsobí, že prvek vyžaduje Datum ISO.
• number – způsobí, že prvek vyžaduje desetinné číslo.
• digits – způsobí, že prvek vyžaduje pouze číslice.
• equalTo – vyžaduje, aby byl prvek stejný jako jiný

některé další metody jsou poskytovány jako doplňky a jsou aktuálně zahrnuty v doplňkových metodách.js v balíčku ke stažení. Ne všechny z nich jsou zdokumentovány zde:

• accept – umožňuje nahrávání souboru přijímat pouze zadané mime-typy.
• creditcard – způsobí, že prvek vyžaduje číslo kreditní karty.
• extension – způsobí, že prvek vyžaduje určitou příponu souboru.
• phoneUS – ověřit platné telefonní číslo v USA.
• require_from_group – zajišťuje, že daný počet polí ve skupině je kompletní.

zdrojový kód pro všechny další metody najdete v úložišti GitHub.

je možné, aby re-definovat provádění vestavěný pravidla používání $.validator.methods vlastnost

odkaz Obecné Pokyny

Obecné Pokyny část obsahuje podrobné diskusi o designu a nápadů za plugin, vysvětluje, proč některé věci jsou tak, jak jsou. Pokrývá funkce podrobněji než dokumentace API, která jen stručně vysvětluje různé dostupné metody a možnosti.

Pokud jste se rozhodli použít ověřovací plugin ve své aplikaci a chcete jej lépe poznat, doporučujeme vám přečíst si pokyny.

odkaz Pole s složité názvy (závorky, tečky)

Když máte jméno atributu jako uživatel, ujistěte se, že dát název do uvozovek. Další podrobnosti v obecných pokynech.

link příliš mnoho rekurze

další běžný problém se vyskytuje s tímto kódem:

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

To má za následek příliš mnoho-rekurze chyba: $(form).submit() spustí další kolo ověřování, což vede k dalším volání submitHandler, a voila, rekurze. Nahraďte to formulářem.submit(), který spouští nativní odeslat událost místo a ne validaci.

Tak správný kód vypadá trochu jinak:

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

odkaz Na Marketo formulář znamení-up

odkaz Na Marketo formulář znamení-up, krok 2

na Základě staré verze marketo.com sign-up formulář. Vlastní ověření bylo jednou nahrazeno tímto pluginem. Díky Glen Lipka za přispění!

pozoruhodné vlastnosti dema:

• přizpůsobené zobrazení zpráv: žádné zprávy se nezobrazují pro požadovanou metodu, pouze pro psaní-chyby (jako nesprávný formát e-mailu); v horní části se zobrazí shrnutí („Zmeškali jste 12 polí. Byly zvýrazněny níže.“)
• vzdálené ověření pole e-mailu. Zkuste zadat např.
• Integrace s maskovaný vstup plugin, viz Zip a Telefon pole a Číslo Kreditní Karty na 2. krok
• vlastní metody pro výrobu fakturační adresa na krok 2 volitelné když „Stejná jako Adresa Společnosti“ je kontrolována
• vlastní postup pro kontrolu hesla: Zkontroluje, zda heslo obsahuje alespoň jedno číslo a jeden znak a zda je alespoň 6 znaků dlouhé. Pokud uživatel rozostří pole neplatnou hodnotou, vstup se vyprázdní a znovu zaostří.

propojte formulář pro registraci mléka

registrační formulář od rememberthemilk.com (na základě starší verze). Vlastní ověření bylo nahrazeno pomocí tohoto pluginu. Díky RTM za přispění!

pozoruhodné vlastnosti dema:

• Vlastní zobrazení zpráv, založené na původní tabulce rozložení, pomocí úspěchu možnost zobrazení zaškrtnutí pro platné polí
• Vzdálené ověření uživatelské jméno, zkontrolujte, zda je již přijata (zkuste „Peter“, „asdf“ nebo „George“)

odkaz vícedílné „koupit&prodat dům“ podobě

Přispěl Michael Evangelisty, ukazuje vícedílné formuláře pro nákup a prodej domů.

pozoruhodné vlastnosti dema:

• Vícedílné, realizovány pomocí jQuery UI akordeon a vlastní metodu, zkontrolujte, zda prvek je na aktuální stránce, když ověřena
• Integrace s maskovaný vstup plugin, viz Telefon na Zip a pole

odkaz Pomocí dálkového validace pomoci s s

Funkce vzdálené ověření pro pomoc uživateli vyplnit s.

Pozoruhodné vlastnosti demo:

• Vzdálené ověření pro kontrolu, zda uživatel zadal správnou , aniž by nutit jej, aby odeslání formuláře