Hoe een eenvoudige jQuery-formuliervalidatie instellen in twee minuten
Deze tutorial laat zien hoe je een basisformuliervalidatie met jQuery kunt instellen, gedemonstreerd aan de hand van een registratieformulier.
We gaan de jQuery Validation Plugin gebruiken om ons formulier te valideren. Het basisprincipe van deze plugin is het specificeren van validatieregels en foutmeldingen voor HTML-elementen in JavaScript.
Hier is een live demo van wat we gaan bouwen:
Zie de Pen
jQuery Form Validation door SitePoint (@SitePoint)
op CodePen.
Step 1: Include jQuery
Eerst moeten we de jQuery bibliotheek includen. De jQuery validatie plugin is getest tot jQuery versie 3.1.1, maar de demo in dit artikel werkt perfect met versie 3.4.1, dat is de nieuwste.
Je kunt een van de volgende download opties gebruiken:
- Download het van jquery.com
- Download het met behulp van Bower:
$ bower install jquery - Download het met behulp van npm of Yarn:
$ npm install jqueryofyarn add jquery - Gebruik een CDN:
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Maak een nieuw HTML-bestand aan met de naam index.html en neem jQuery op voor de afsluitende </body> tag:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>Als je Bower of npm wilt gebruiken, maar er nog niet bekend mee bent, zijn deze twee artikelen misschien interessant voor je:
- Pakketbeheer voor de browser met Bower
- Een beginnershandleiding voor npm – de Node pakketbeheerder
Stap 2: Neem de jQuery Validation Plugin op
Kies tussen:
- Download het van de plugin’s github repo
- Download het met behulp van Bower:
$ bower install jquery-validation - Download het met behulp van npm:
npm i jquery-validation - NuGet:
Install-Package jQuery.Validation - Gebruik een CDN:
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
Integreer de plugin na jQuery:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>Stap 3: Maak het HTML-formulier
Voor de registratie willen we de volgende gebruikersinformatie verzamelen:
- voornaam
- achternaam
- wachtwoord
Dus, laten we ons formulier maken met deze invoervelden:
<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="●●●●●"/> <button type="submit">Register</button> </form></div>Wanneer je dit in een echte applicatie integreert, vergeet dan niet het action attribuut in te vullen, om er zeker van te zijn dat het formulier naar de juiste bestemming wordt verzonden.
Stap 4: Maak stijlen voor het formulier
Maak een nieuw bestand, css/styles.css, en neem het op in de <head> sectie van je HTML bestand:
<link rel="stylesheet" href="css/style.css"/>Kopieer de volgende stijlen naar het nieuw aangemaakte bestand:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");/* Styles */* { margin: 0; padding: 0;}body { font-family: "Open Sans"; font-size: 14px;}.container { width: 500px; margin: 25px auto;}form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}form label,form input,form button { border: 0; margin-bottom: 3px; display: block; width: 100%;}form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer;}form .error { color: #ff0000;}Noteer de stijlen voor .error, die gebruikt zullen worden voor foutmeldingen bij de validatie.
Stap 5: Maak de validatieregels
Ten slotte moeten we de formulier validatie plugin initialiseren. Maak een nieuw bestand js/form-validation.js en verwijs daarnaar na de <script> tag van de jQuery Validation plugin:
<script src="js/form-validation.js"></script>Kopieer de volgende code in het nieuw aangemaakte bestand:
// Wait for the DOM to be ready$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form").validate({ // Specify validation rules rules: { // The key name on the left side is the name attribute // of an input field. Validation rules are defined // on the right side firstname: "required", lastname: "required", email: { required: true, // Specify that email should be validated // by the built-in "email" rule email: true }, password: { required: true, minlength: 5 } }, // Specify validation error messages messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } });});Conclusie
Dat is het, je bent klaar! Nu heb je een idee hoe je formulier validatie kunt opzetten met jQuery. Houd in gedachten dat dit niet server-side validatie te vervangen. Het is nog steeds mogelijk voor een kwaadwillende gebruiker om de validatie regels te manipuleren of te omzeilen (bijvoorbeeld door gebruik te maken van de browser’s developer tools).