SitePoint | ISNCA

Questo tutorial vi mostra come impostare una validazione di base del modulo con jQuery, dimostrata da un modulo di registrazione.

Utilizzeremo il plugin jQuery Validation per validare il nostro modulo. Il principio di base di questo plugin è di specificare regole di validazione e messaggi di errore per elementi HTML in JavaScript.

Ecco una demo dal vivo di quello che costruiremo:

Guarda la Penna
jQuery Form Validation di SitePoint (@SitePoint)
su CodePen.

Step 1: Includere jQuery

Per prima cosa, dobbiamo includere la libreria jQuery. Il plugin di validazione jQuery è stato testato fino alla versione 3.1.1 di jQuery, ma la demo in questo articolo funziona perfettamente con la versione 3.4.1, che è la più recente.

Puoi usare una delle seguenti opzioni di download:

Scaricala da jquery.com
Scaricala usando Bower: $ bower install jquery
Scaricalo usando npm o Yarn: $ npm install jquery o yarn add jquery
Utilizzare un CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Creare un nuovo file HTML chiamato index.html e includere jQuery prima del tag di chiusura </body>:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>

Se ti piacerebbe usare Bower o npm ma non hai familiarità con essi, potresti essere interessato a questi due articoli:

Gestione dei pacchetti per il browser con Bower
Guida per principianti a npm – il gestore dei pacchetti di Node

Passo 2: Includere il plugin di validazione jQuery

Scegliere tra:

Scaricarlo dal repo github del plugin
Scaricarlo usando Bower: $ bower install jquery-validation
Scaricalo usando npm: npm i jquery-validation
NuGet: Install-Package jQuery.Validation
Utilizzare un CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Includere il plugin dopo jQuery:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Step 3: Creare il modulo HTML

Per la registrazione, vogliamo raccogliere le seguenti informazioni utente:

nome
cognome
email
password

Creiamo quindi il nostro modulo contenente questi campi di input:

<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="&#9679;&#9679;&#9679;&#9679;&#9679;"/> <button type="submit">Register</button> </form></div>

Quando lo integriamo in un’applicazione reale, non dimentichiamo di compilare l’attributo action, per assicurarci che il modulo sia inviato alla destinazione corretta.

Passo 4: Creare gli stili per il modulo

Creare un nuovo file, css/styles.css, e includerlo nella sezione <head> del tuo file HTML:

<link rel="stylesheet" href="css/style.css"/>

Copia i seguenti stili nel file appena creato:

@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;}

Nota gli stili per .error, che saranno usati per i messaggi di errore di validazione.

Passo 5: Creare le regole di validazione

Infine, abbiamo bisogno di inizializzare il plugin di validazione dei form. Creare un nuovo file js/form-validation.js e farne riferimento dopo il tag <script> del plugin jQuery Validation:

<script src="js/form-validation.js"></script>

Copia il seguente codice nel file appena creato:

// 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(); } });});

Conclusione

Ecco, hai finito! Ora hai un’idea di come impostare la validazione dei moduli con jQuery. Tieni presente che questo non sostituisce la validazione lato server. È ancora possibile per un utente malintenzionato manipolare o aggirare le regole di validazione (per esempio, usando gli strumenti di sviluppo del browser).

Come impostare la validazione di base di un modulo jQuery in due minuti