” Ma jQuery non rende facile scrivere il proprio plugin di convalida?”
Certo, ma ci sono ancora molte sottigliezze di cui occuparsi: hai bisogno di una libreria standard di metodi di convalida (come email, URL, numeri di carte di credito). È necessario inserire messaggi di errore nel DOM e mostrarli e nasconderli quando appropriato. Vuoi reagire a più di un semplice evento di invio, come keyup e blur.
Potrebbero essere necessari diversi modi per specificare le regole di convalida in base all’ambiente lato server che si sta utilizzando su diversi progetti. E dopo tutto, non vuoi reinventare la ruota, vero?

” Ma non ci sono già un sacco di plugin di convalida là fuori?”
Giusto, ci sono molte soluzioni non basate su jQuery (che eviteresti da quando hai trovato jQuery) e alcune soluzioni basate su jQuery. Questo particolare è uno dei più antichi plugin jQuery (iniziato nel luglio 2006) e si è dimostrato in progetti in tutto il mondo. C’è anche un articolo che discute come questo plugin si adatta al disegno di legge della soluzione di convalida dovrebbe essere.

Non convinto? Dai un’occhiata a questo esempio:

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

il link non È bello e facile?

Una singola riga di jQuery per selezionare il modulo e applicare il plugin di convalida, più alcune annotazioni su ciascun elemento per specificare le regole di convalida.

Ovviamente questo non è l’unico modo per specificare le regole. Inoltre, non è necessario fare affidamento su quei messaggi predefiniti, ma sono utili quando si inizia a configurare la convalida per un modulo.

collega alcune cose a cui prestare attenzione quando giochi con la demo

• Dopo aver provato a inviare un modulo non valido, il primo elemento non valido è focalizzato, consentendo all’utente di correggere il campo. Se un altro campo non valido, che non era il primo, era focalizzato prima di inviare, quel campo è focalizzato, consentendo all’utente di iniziare in basso se preferisce.
• Prima che un campo sia contrassegnato come non valido, la convalida è pigra: prima di inviare il modulo per la prima volta, l’utente può scorrere i campi senza ricevere messaggi fastidiosi-non verranno disturbati prima di avere la possibilità di inserire effettivamente un valore corretto
• Una volta che un campo è contrassegnato come non valido,: Non appena l’utente ha immesso il valore necessario, il messaggio di errore viene rimosso
• Se l’utente entra qualcosa in un non-marcato campo, e le schede/click di distanza da esso (sfocatura di campo), è convalidato – ovviamente l’utente aveva l’intenzione di inserire qualcosa, ma non è riuscita a inserire il valore corretto

Che il comportamento può essere irritante quando si fa clic attraverso demo di convalida dei plugin è stato progettato per una discreta esperienza utente, fastidioso l’utente meno possibile con inutili messaggi di errore. Quindi, quando provi altre demo, prova a reagire come farebbe uno dei tuoi utenti e vedi se il comportamento è migliore. In caso contrario, per favore fatemi sapere su tutte le idee che si possono avere per miglioramenti!

link API Documentation

Probabilmente stai cercando

Opzioni di collegamento per il metodo validate ()

In caso contrario, continua a leggere.

In tutta la documentazione, due termini sono usati molto spesso, quindi è importante che tu conosca il loro significato nel contesto del plugin di convalida:

• metodo: Un metodo di convalida implementa la logica per convalidare un elemento, come un metodo di posta elettronica che controlla il formato corretto del valore di un input di testo. Una serie di metodi standard è disponibile, ed è facile da scrivere il proprio.
• regola: una regola di convalida associa un elemento a un metodo di convalida, come “convalida l’input con nome “posta primaria” con i metodi “richiesto”e ” email”.

link Plugin methods

Questa libreria aggiunge tre jQuery plugin methods, il punto di ingresso principale è ilvalidate metodo:

• validate() – Convalida il modulo selezionato.
• valid() – Controlla se il modulo selezionato o gli elementi selezionati sono validi.
• rules() – Leggere, aggiungere e rimuovere regole per un elemento.

collega selettori personalizzati

Questa libreria estende anche jQuery con tre selettori personalizzati:

• :blank – Seleziona tutti gli elementi con un valore vuoto.
• :filled – Seleziona tutti gli elementi con un valore pieno.
• :unchecked – Seleziona tutti gli elementi deselezionati.

link Validator

Il metodo validate restituisce un oggetto Validator che ha alcuni metodi pubblici che è possibile utilizzare per attivare la convalida a livello di codice o modificare il contenuto del modulo. L’oggetto validator ha più metodi, ma solo quelli qui documentati sono destinati all’uso.

• Validator.form() – Convalida il modulo.
• Validator.element() – Convalida un singolo elemento.
• Validator.resetForm() – Ripristina il modulo controllato.
• Validator.showErrors() – Mostra i messaggi specificati.
• Validator.numberOfInvalids() – Restituisce il numero di campi non validi.
• Validator.destroy() – Distrugge questa istanza di validatore.

Ci sono alcuni metodi statici sull’oggetto validator:

• jQuery.validator.addMethod() – Aggiungi un metodo di convalida personalizzato.
• jQuery.validator.format() – Sostituisce {n} segnaposto con argomenti.
• jQuery.validator.setDefaults() – Modifica le impostazioni predefinite per la convalida.
• jQuery.validator.addClassRules() – Aggiungere un metodo di classe composto.

Elenco dei link dei metodi di convalida incorporati

Viene fornito un set di metodi di convalida standard:

• required-Rende l’elemento richiesto.
• remote – Richiede una risorsa per verificare la validità dell’elemento.
• minlength – Rende l’elemento richiede una data lunghezza minima.
• maxlength – Rende l’elemento richiede una data lunghezza massima.
• rangelength – Rende l’elemento richiede un determinato intervallo di valori.
• min – Rende l’elemento richiede un dato minimo.
• max – Rende l’elemento richiede un dato massimo.
• range – Rende l’elemento richiede un determinato intervallo di valori.
• step – Rende l’elemento richiede un determinato passo.
• email Rende l’elemento richiedono una e-mail valido
• url Rende l’elemento richiede un url valido
• date Rende l’elemento richiedono una data.
• dateISO – Rende l’elemento richiede una data ISO.
• number – Rende l’elemento richiede un numero decimale.
• digits – Rende l’elemento richiede solo cifre.
• equalTo – Richiede che l’elemento sia lo stesso di un altro

Alcuni altri metodi sono forniti come componenti aggiuntivi e sono attualmente inclusi in metodi aggiuntivi.js nel pacchetto di download. Non tutti sono documentati qui:

• accept – Fa in modo che un caricamento di file accetti solo tipi mime specificati.
• creditcard – Rende l’elemento richiede un numero di carta di credito.
• extension – Rende l’elemento richiede una certa estensione di file.
• phoneUS – Convalidare per numero di telefono valido degli Stati Uniti.
• require_from_group – Assicura che un determinato numero di campi in un gruppo siano completi.

È possibile trovare il codice sorgente per tutti i metodi aggiuntivi nel repository GitHub.

È possibile ridefinire l’implementazione delle regole incorporate utilizzando la proprietà $.validator.methods

link General Guidelines

La sezione General Guidelines fornisce una discussione dettagliata del design e delle idee alla base del plugin, spiegando perché certe cose sono come sono. Copre le funzionalità in modo più dettagliato rispetto alla documentazione dell’API, che spiega brevemente i vari metodi e le opzioni disponibili.

Se hai deciso di utilizzare il plugin di convalida nella tua applicazione e vuoi conoscerlo meglio, ti consigliamo di leggere le linee guida.

collega i campi con nomi complessi (parentesi, punti)

Quando hai un attributo name come user, assicurati di mettere il nome tra virgolette. Maggiori dettagli nelle Linee guida generali.

collega troppa ricorsione

Un altro problema comune si verifica con questo codice:

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

Questo si traduce in un troppo-molto-errore di ricorsione: $(form).submit() innesca un altro giro di convalida, in un’altra chiamata a submitHandler, e voilà, la ricorsione. Sostituiscilo con form.submit (), che attiva invece l’evento di invio nativo e non la convalida.

il codice corretto leggermente diverso:

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

collegare Il Marketo modulo di iscrizione

collegare Il Marketo modulo di iscrizione, passaggio 2

Basato su una vecchia versione del marketo.com modulo di iscrizione. La convalida personalizzata è stata sostituita una volta con questo plugin. Grazie a Glen Lipka per aver contribuito!

Caratteristiche notevoli della demo:

• Visualizzazione messaggi personalizzata: nessun messaggio visualizzato per il metodo richiesto, solo per errori di battitura (come il formato e-mail errato); Viene visualizzato un riepilogo in alto (“Hai perso 12 campi. Sono stati evidenziati di seguito.”)
• Convalida remota del campo e-mail. Prova ad entrare ad es.
• Integrazione con il plugin masked-input, vedi i campi Zip e Phone e il numero di carta di credito al passaggio 2
• Un metodo personalizzato per rendere facoltativo l’indirizzo di fatturazione al passaggio 2 quando viene selezionato “Same as Company Address”
• Un metodo personalizzato per il controllo della password: Verifica che la password contenga almeno un numero e un carattere e che sia lunga almeno 6 caratteri. Se l’utente sfoca il campo con un valore non valido, l’input viene svuotato e viene nuovamente attivato.

collega il modulo di iscrizione Remember The Milk

Il modulo di iscrizione da rememberthemilk.com (basato su una versione precedente). La convalida personalizzata è stata sostituita utilizzando questo plugin. Grazie a RTM per aver contribuito!

Caratteristiche notevoli della demo:

• messaggio Personalizzato la visualizzazione in layout di tabella, usando successo opzione per visualizzare un segno di spunta per campi validi
• Telecomando convalida di nome utente, per verificare se si è già preso (provare a “Pietro”, “asdf” o “George”)

collegamento di Un multipart “buy&la vendita di una casa” forma

Contribuito da Michael Evangelista, mostrando un form multipart per l’acquisto e la vendita di case.

Caratteristiche notevoli della demo:

• Multipart, implementato utilizzando jQuery UI fisarmonica e di un metodo personalizzato per verificare se un elemento è nella pagina corrente quando viene convalidato
• Integrazione con i mascherati-ingresso plugin, Telefono e Zip campi

collegamento remoto di convalida per aiutare con s

Caratteristiche convalida remoto per aiutare l’utente a compilare s.

le caratteristiche di rilievo della demo:

• convalida Remoto per controllare se l’utente ha immesso corretto , senza costringere lui a presentare il modulo di primo