” maar maakt jQuery het niet gemakkelijk om uw eigen validatieplugin te schrijven?”
zeker, maar er zijn nog veel subtiliteiten om voor te zorgen: je hebt een standaard bibliotheek van validatiemethoden nodig (zoals e-mails, URL ‘ s, creditcardnummers). U moet foutmeldingen in de DOM plaatsen en tonen en verbergen wanneer van toepassing. Je wilt reageren op meer dan alleen een submit event, zoals keyup en blur.
U hebt mogelijk verschillende manieren nodig om validatieregels op te geven volgens de server-side omgeving die u gebruikt voor verschillende projecten. En je wilt het wiel toch niet opnieuw uitvinden?

” maar zijn er niet al een ton van validatie plugins die er zijn?”
juist, er zijn veel niet-jQuery-gebaseerde oplossingen (die je zou vermijden omdat je jQuery gevonden) en een aantal jQuery-gebaseerde oplossingen. Deze bijzondere is een van de oudste jQuery plugins (gestart in juli 2006) en heeft zich bewezen in projecten over de hele wereld. Er is ook een artikel bespreken hoe deze plugin past bij de bill van de moet-worden validatie oplossing.

niet overtuigd? Bekijk dit voorbeeld:

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

koppeling Is dat niet fijn en makkelijk?

een enkele regel jQuery om het formulier te selecteren en de validatieplugin toe te passen, plus een paar annotaties op elk element om de validatieregels te specificeren.

natuurlijk is dat niet de enige manier om regels te specificeren. Je hoeft ook niet te vertrouwen op die standaard berichten, maar ze komen van pas bij het starten van de setup validatie voor een formulier.

koppel een paar dingen om op te letten bij het spelen met de demo

• na het proberen om een ongeldige vorm in te dienen, wordt het eerste ongeldige element gefocust, waardoor de gebruiker het veld kan corrigeren. Als een ander ongeldig veld – dat was niet het eerste – werd gefocust voordat submit, dat veld is gericht in plaats daarvan, waardoor de gebruiker om te beginnen aan de onderkant als hij of zij de voorkeur geeft.
• voordat een veld als ongeldig wordt gemarkeerd, is de validatie lui: voordat het formulier voor de eerste keer wordt verzonden, kan de gebruiker velden doorlopen zonder vervelende berichten te krijgen – ze worden niet afgeluisterd voordat ze de kans hebben om daadwerkelijk een correcte waarde in te voeren
• zodra een veld ongeldig is gemarkeerd, wordt het gretig gevalideerd: Zodra de gebruiker de benodigde waarde heeft ingevoerd, wordt de foutmelding verwijderd
• als de gebruiker iets invoert in een niet-gemarkeerd veld en er tabs/klikken vanaf (vervagen het veld), wordt het gevalideerd – uiteraard had de gebruiker de intentie om iets in te voeren, maar kon niet de juiste waarde

invoeren dat gedrag irritant kan zijn bij het klikken door demo ‘ s van de validatieplugin – het is ontworpen voor een onopvallende gebruikerservaring, de gebruiker zo min mogelijk irriteren met onnodige foutmeldingen. Dus als je andere demo ‘ s uitprobeert, probeer dan te reageren zoals een van je gebruikers zou doen, en kijk of het gedrag dan beter is. Zo niet, laat het me weten over eventuele ideeën die u heeft voor verbeteringen!

link API Documentatie

u bent waarschijnlijk op zoek naar

link Opties voor de validate() methode

zo niet, lees dan verder.

in de documentatie worden vaak twee termen gebruikt, dus het is belangrijk dat u hun betekenis kent in de context van de validatieplugin:

• methode: Een validatiemethode implementeert de logica om een element te valideren, zoals een e-mailmethode die controleert op het juiste formaat van de waarde van een tekstinvoer. Een set van standaard methoden is beschikbaar, en het is gemakkelijk om uw eigen te schrijven.
• regel: een validatieregel associeert een element met een validatiemethode, zoals “validate input with name “primary-mail” with methods “required” and “email”.

link Plugin methoden

Deze bibliotheek voegt drie jQuery plugin methoden, het belangrijkste invoerpunt is de validate methode:

• validate() – valideert de geselecteerde vorm.
• valid() – controleert of de geselecteerde vorm of geselecteerde elementen geldig zijn.
• rules() – regels voor een element lezen, toevoegen en verwijderen.

link aangepaste selectors

Deze bibliotheek breidt jQuery ook uit met drie aangepaste selectors:

• :blank – selecteert alle elementen met een lege waarde.
• :filled – selecteert alle elementen met een gevulde waarde.
• :unchecked – selecteert alle elementen die niet zijn aangevinkt.

link Validator

de methode validate geeft een Validator-object terug dat een paar openbare methoden heeft die u kunt gebruiken om programmatisch validatie te activeren of de inhoud van het formulier te wijzigen. Het object validator heeft meer methoden, maar alleen de hier beschreven zijn bedoeld voor gebruik.

• Validator.form() – valideert het formulier.
• Validator.element() – valideert een enkel element.
• Validator.resetForm() – stelt de gecontroleerde vorm opnieuw in.
• Validator.showErrors() – Toon de opgegeven berichten.
• Validator.numberOfInvalids() – geeft het aantal ongeldige velden terug.
• Validator.destroy() – vernietigt deze instantie van validator.

er zijn een paar statische methoden op het Validator-object:

• jQuery.validator.addMethod() – voeg een aangepaste validatiemethode toe.
• jQuery.validator.format() – vervangt {n} plaatsaanduidingen door argumenten.
• jQuery.validator.setDefaults() – Wijzig de standaardinstellingen voor validatie.
• jQuery.validator.addClassRules() – voeg een compound class methode toe.

link lijst van ingebouwde Validatiemethoden

een reeks standaardvalidatiemethoden wordt verstrekt:

• required-maakt het element vereist.
• remote – verzoekt een bron om het element op geldigheid te controleren.
• minlength – maakt dat het element een bepaalde minimumlengte vereist.
• maxlength – maakt dat het element een bepaalde maximale lengte vereist.
• rangelength – maakt dat het element een gegeven waardebereik nodig heeft.
• min – maakt dat het element een bepaald minimum vereist.
• max – maakt dat het element een bepaald maximum vereist.
• range – maakt dat het element een gegeven waardebereik nodig heeft.
• step – maakt dat het element een bepaalde stap vereist.
• email – maakt dat het element een geldige e – mail vereist
• url – maakt dat het element een geldige url vereist
• date – maakt dat het element een datum vereist.
• dateISO – maakt dat het element een ISO-datum vereist.
• number – maakt dat het element een decimaal getal vereist.
• digits – maakt dat het element alleen cijfers nodig heeft.
• equalTo – vereist dat het element hetzelfde is als een ander

sommige meer methoden worden geleverd als add-ons, en zijn momenteel opgenomen in additional-methods.js in het downloadpakket. Niet allemaal zijn hier gedocumenteerd:

• accept – laat een bestand uploaden alleen gespecificeerde mime-types accepteren.
• creditcard – Voor het element is een creditcardnummer vereist.
• extension – maakt dat het element een bepaalde bestandsextensie nodig heeft.
• phoneUS – valideren voor geldig Amerikaans telefoonnummer.
• require_from_group – zorgt ervoor dat een bepaald aantal velden in een groep is voltooid.

je kunt de broncode vinden voor alle extra methoden in de GitHub repository.

Het is mogelijk om de implementatie van de ingebouwde regels opnieuw te definiëren met behulp van de$.validator.methods eigenschap

link algemene richtlijnen

de algemene richtlijnen sectie geeft een gedetailleerde bespreking van het ontwerp en de ideeën achter de plugin, waarin wordt uitgelegd waarom bepaalde dingen zijn zoals ze zijn. Het behandelt de functies in meer detail dan de API-documentatie, die slechts kort de verschillende methoden en opties die beschikbaar zijn.

Als u hebt besloten om de validatieplugin in uw toepassing te gebruiken en deze beter wilt leren kennen, is het raadzaam dat u de richtlijnen leest.

link velden met complexe namen (haakjes, puntjes)

Als u een naam attribuut zoals gebruiker, zorg ervoor dat de naam tussen aanhalingstekens. Meer details in de algemene richtlijnen.

link te veel recursie

een ander veel voorkomend probleem doet zich voor met deze code:

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

Dit resulteert in een te-veel-recursie fout: $(form).submit() activeert een andere ronde van validatie, wat resulteert in een ander gesprek te submitHandler, en voila, recursie. Vervang dat door formulier.submit (), die in plaats daarvan de native submit-gebeurtenis activeert en niet de validatie.

Dus de juiste code ziet er een beetje anders:

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

koppel De Marketo sign-up formulier

link De Marketo sign-up formulier, stap 2

Gebaseerd op een oude versie van de marketo.com sign-up formulier. De aangepaste validatie werd ooit vervangen door deze plugin. Met dank aan Glen Lipka voor zijn bijdrage!

opvallende kenmerken van de demo:

• aangepaste berichtweergave: er worden geen berichten weergegeven voor de vereiste methode, alleen voor typefouten (zoals verkeerde e-mailindeling); bovenaan wordt een samenvatting weergegeven (“u hebt 12 velden gemist. Zij zijn hieronder belicht.”)
• validatie op afstand van het e-mailveld. Probeer bijvoorbeeld in te voeren.
• integratie met gemaskeerde invoerplugin, zie Zip-en Telefoonvelden en creditcardnummer in Stap 2
• een aangepaste methode om het factuuradres in Stap 2 optioneel te maken wanneer “hetzelfde als bedrijfsadres” is aangevinkt
• een aangepaste methode om het wachtwoord te controleren: Controleert of het wachtwoord minstens één nummer en één teken bevat en of het minstens 6 tekens lang is. Als de gebruiker het veld vervaagt met een ongeldige waarde, wordt de invoer geleegd en krijgt de focus weer.

link het registratieformulier voor melk onthouden

het registratieformulier uit rememberthemilk.com (gebaseerd op een oudere versie). De aangepaste validatie werd vervangen met behulp van deze plugin. Dank aan RTM voor zijn bijdrage!

opvallende kenmerken van de demo:

• aangepaste berichtweergave, gebaseerd op de oorspronkelijke tabelopmaak, met behulp van de optie succes om een vinkje te tonen voor geldige velden
• validatie op afstand van Gebruikersnaam, om te controleren of deze al is gebruikt (probeer “Peter”, “asdf” of “George”)

link a multipart “buy&sell a house” form

bijgedragen door Michael Evangelista, met een meerdelige vorm voor het kopen en verkopen van huizen.

opvallende kenmerken van de demo:

• Multipart, geïmplementeerd met behulp van de jQuery-UI-accordeon en een aangepaste methode om te controleren of een element is de huidige pagina als gevalideerd
• Integratie met gemaskeerde-input plugin, zie Telefoon-en Zip-velden

koppeling Met externe validatie te helpen met s

mogelijkheden voor externe validatie voor het helpen van de gebruiker in te vullen s.

Opvallende kenmerken van de demo:

• Externe validatie om te controleren of de gebruiker is ingevoerd , zonder dat dwingt hem om het formulier te submitten eerste