„dar nu jQuery face mai ușor de a scrie propriul plugin de validare?”
sigur,dar există încă o mulțime de subtilități de care trebuie să aveți grijă: aveți nevoie de o bibliotecă standard de metode de validare (cum ar fi e-mailuri, adrese URL, numere de carduri de credit). Trebuie să plasați mesaje de eroare în DOM și să le afișați și să le ascundeți atunci când este cazul. Vrei să reacționezi la mai mult decât un eveniment de trimitere, cum ar fi keyup și blur.
este posibil să aveți nevoie de moduri diferite de a specifica regulile de validare în funcție de mediul server-side pe care îl utilizați pe diferite proiecte. Și la urma urmei, nu vrei să reinventezi roata, nu-i așa?

„dar nu există deja o mulțime de pluginuri de validare acolo?”
corect,există o mulțime de soluții bazate pe non-jQuery (pe care le-ați evita de când ați găsit jQuery) și unele soluții bazate pe jQuery. Acesta este unul dintre cele mai vechi pluginuri jQuery (început în iulie 2006) și s-a dovedit în proiecte din întreaga lume. Există, de asemenea, un articol care discută modul în care acest plugin se potrivește cu factura soluției de validare ar trebui să fie.

nu sunt convins? Aruncați o privire la acest exemplu:

<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-ul nu este că frumos și ușor?

o singură linie de jQuery pentru a selecta formularul și se aplică plugin-ul de validare, plus câteva adnotări pe fiecare element pentru a specifica regulile de validare.

desigur că nu este singura modalitate de a specifica reguli. De asemenea, nu trebuie să vă bazați pe acele mesaje implicite, dar acestea sunt utile atunci când începeți să configurați validarea pentru un formular.

link câteva lucruri să se uite pentru atunci când joacă în jurul cu demo

• după ce a încercat să prezinte un formular nevalid, primul element nevalid este axat, permițând utilizatorului să corecteze câmpul. Dacă un alt câmp nevalid – care nu a fost primul – a fost focalizat înainte de trimitere, acel câmp este focalizat în schimb, permițând utilizatorului să înceapă în partea de jos dacă preferă.
• înainte ca un câmp să fie marcat ca nevalid, validarea este leneșă: înainte de a trimite formularul pentru prima dată, utilizatorul poate fila prin câmpuri fără a primi mesaje enervante – nu vor fi bugate înainte de a avea șansa de a introduce efectiv o valoare corectă
• odată ce un câmp este marcat nevalid, este validat cu nerăbdare: De îndată ce utilizatorul a introdus valoarea necesară, mesajul de eroare este eliminat
• dacă utilizatorul introduce ceva într-un câmp nemarcat, iar filele/clicurile se îndepărtează de acesta (estompează câmpul), acesta este validat – evident că utilizatorul a avut intenția de a introduce ceva, dar nu a reușit să introducă valoarea corectă

că comportamentul poate fi iritant atunci când faceți clic pe demo – urile pluginului de validare-este conceput pentru o experiență discretă a utilizatorului, enervând utilizatorul cât mai puțin posibil cu mesaje de eroare inutile. Deci, atunci când încercați alte demo-uri, încercați să reacționați ca unul dintre utilizatorii dvs. și să vedeți dacă comportamentul este mai bun atunci. Dacă nu, vă rog să-mi spuneți despre orice idei pe care le puteți avea pentru îmbunătățiri!

documentație API link

probabil căutați

Opțiuni de link pentru metoda validate ()

dacă nu, citiți mai departe.

de-a lungul documentației, doi termeni sunt folosiți foarte des, deci este important să știți semnificația lor în contextul pluginului de validare:

• metodă: O metodă de validare implementează logica pentru a valida un element, cum ar fi o metodă de e-mail care verifică formatul corect al valorii unei intrări de text. Un set de metode standard este disponibil și este ușor să vă scrieți propriul.
• regulă: o regulă de validare asociază un element cu o metodă de validare, cum ar fi „validare intrare cu nume „primary-mail” cu metode „required” și „email”.

link Plugin metode

această bibliotecă adaugă trei metode plugin jQuery, punctul principal de intrare fiind validate metoda:

• validate() – validează formularul selectat.
• valid() – verifică dacă formularul selectat sau elementele selectate sunt valide.
• rules() – citiți, adăugați și eliminați reguli pentru un element.

link selectoare personalizate

această bibliotecă se extinde, de asemenea, jQuery cu trei selectoare personalizate:

• :blank – Selectează toate elementele cu o valoare necompletată.
• :filled – Selectează toate elementele cu o valoare umplută.
• :unchecked – Selectează toate elementele care nu sunt bifate.

link Validator

metoda validare returnează un obiect Validator care are câteva metode publice pe care le puteți utiliza pentru a declanșa validarea programatic sau pentru a modifica conținutul formularului. Obiectul validator are mai multe metode, dar numai cele documentate aici sunt destinate utilizării.

• Validator.form() – validează formularul.
• Validator.element() – validează un singur element.
• Validator.resetForm() – resetează formularul controlat.
• Validator.showErrors() – Afișați mesajele specificate.
• Validator.numberOfInvalids() – returnează numărul de câmpuri nevalide.
• Validator.destroy() – distruge această instanță de validator.

există câteva metode statice pe obiectul validator:

• jQuery.validator.addMethod() – adăugați o metodă de validare personalizată.
• jQuery.validator.format() – înlocuiește {n} substituenți cu argumente.
• jQuery.validator.setDefaults() – modificați setările implicite pentru validare.
• jQuery.validator.addClassRules() – adăugați o metodă de clasă compusă.

lista de legături a metodelor de validare încorporate

este furnizat un set de metode de validare standard:

• required-face elementul necesar.
• remote – solicită o resursă pentru a verifica validitatea elementului.
• minlength – face ca elementul să necesite o lungime minimă dată.
• maxlength – face ca elementul să necesite o lungime maximă dată.
• rangelength – face ca elementul să necesite un interval de valori dat.
• min – face ca elementul să necesite un minim dat.
• max – face ca elementul să necesite un maxim dat.
• range – face ca elementul să necesite un interval de valori dat.
• step – face ca elementul să necesite un pas dat.
• email – face ca elementul să necesite un e – mail valid
• url – face ca elementul să necesite o adresă URL validă
• date – face ca elementul să necesite o dată.
• dateISO – face ca elementul să necesite o dată ISO.
• number – face ca elementul să necesite un număr zecimal.
• digits – face ca elementul să necesite doar cifre.
• equalTo – necesită elementul să fie la fel ca un alt

unele mai multe metode sunt furnizate ca suplimente, și sunt în prezent incluse în suplimentare-metode.js în pachetul de descărcare. Nu toate dintre ele sunt documentate aici:

• accept – face o încărcare fișier accepta numai specificate MIME-tipuri.
• creditcard – face ca elementul să necesite un număr de card de credit.
• extension – face ca elementul să necesite o anumită extensie de fișier.
• phoneUS – validați numărul de telefon valid din SUA.
• require_from_group – asigură un anumit număr de câmpuri dintr-un grup sunt complete.

puteți găsi codul sursă pentru toate metodele suplimentare în depozitul GitHub.

este posibil să redefiniți implementarea regulilor încorporate folosind$.validator.methods proprietate

link linii directoare generale

secțiunea linii directoare generale oferă discuții detaliate despre designul și ideile din spatele pluginului, explicând de ce anumite lucruri sunt așa cum sunt. Acesta acoperă caracteristicile mai detaliat decât documentația API, care explică doar pe scurt diferitele metode și opțiuni disponibile.

Dacă ați decis să utilizați pluginul de validare din aplicația dvs. și doriți să îl cunoașteți mai bine, este recomandat să citiți instrucțiunile.

câmpuri de legătură cu nume complexe (paranteze, puncte)

când aveți un atribut de nume ca utilizator, asigurați-vă că introduceți numele între ghilimele. Mai multe detalii în orientările generale.

link prea mult recursivitate

o altă problemă comună apare cu acest cod:

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

acest lucru duce la o eroare prea mult-recursivitate: $(form).submit() declanșează o altă rundă de validare, rezultând într-un alt apel la submithandler, și voila, recursivitate. Înlocuiți-l cu formularul.submit (), care declanșează în schimb evenimentul remitere nativă și nu validarea.

deci codul corect arată ușor diferit:

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

link formularul de înscriere Marketo

link formularul de înscriere Marketo, pasul 2

bazat pe o versiune veche a marketo.com formular de înscriere. Validarea personalizată a fost înlocuită odată cu acest plugin. Mulțumim lui Glen Lipka pentru contribuția sa!

caracteristici notabile ale demo:

• Afișare mesaj personalizat: nu sunt afișate mesaje pentru metoda necesară, numai pentru tastarea-erori (cum ar fi format de e-mail greșit); un rezumat este afișat în partea de sus („ai pierdut 12 câmpuri. Acestea au fost evidențiate mai jos.”)
• validarea la distanță a câmpului de e-mail. Încercați să introduceți de ex.
• integrarea cu mascat-input plugin, a se vedea Zip și telefon câmpuri și numărul cardului de Credit la Pasul 2
• o metodă personalizată pentru a face adresa de facturare la Pasul 2 opțional atunci când „la fel ca adresa companiei” este verificat
• o metodă personalizată pentru verificarea parolei: Verifică dacă parola conține cel puțin un număr și un caracter și că are cel puțin 6 caractere. Dacă utilizatorul estompează câmpul cu o valoare nevalidă, intrarea este golită și se focalizează din nou.

link formularul de înscriere amintiți-vă laptele

formularul de înscriere de la rememberthemilk.com (bazat pe o versiune mai veche). Validarea personalizată a fost înlocuită folosind acest plugin. Vă mulțumim pentru RTM pentru contribuția!

caracteristici notabile ale demo:

• Afișare mesaj personalizat, bazat pe aspectul de masă original, folosind opțiunea de succes pentru a afișa o bifă pentru câmpuri valide
• validarea de la distanță de nume de utilizator, pentru a verifica dacă este deja luată (încercați „Peter”, „asdf” sau „George”)

link-ul unui multipart „cumpara&vinde o casă” formular

, arătând un formular multipart pentru cumpărarea și vânzarea de case.

caracteristici notabile ale demo:

• Multipart, implementat folosind acordeonul UI jQuery și o metodă personalizată pentru a verifica dacă un element se află pe pagina curentă atunci când este validat
• integrare cu pluginul de intrare mascat, consultați câmpurile de telefon și Zip

link folosind validarea la distanță pentru a ajuta cu S

caracteristici validare la distanță pentru utilizatorul a introdus corect , fără a-l obliga să prezinte mai întâi formularul