{"id":25860,"date":"2021-06-07T09:56:00","date_gmt":"2021-06-07T06:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25860"},"modified":"2021-10-18T03:05:00","modified_gmt":"2021-10-18T00:05:00","slug":"convalida-del-modulo-html-utilizzando-prezzemolo","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/convalida-del-modulo-html-utilizzando-prezzemolo\/","title":{"rendered":"Convalida del modulo HTML utilizzando prezzemolo"},"content":{"rendered":"

Stai cercando di applicare convalide sul tuo modulo HTML? Le convalide lato client sono utili per garantire che tutti i campi del modulo siano compilati e in un formato corretto. Aiuta gli utenti a correggere immediatamente eventuali dati non validi. Dovresti sempre avere convalide lato client sui moduli del tuo sito web. Se lo salti e applichi solo la convalida lato server, ritarderebbe l’invio del modulo in caso di errori.<\/p>\n

Parsley<\/a> \u00e8 un’utile libreria di convalida dei moduli che \u00e8 facile da integrare. Questa libreria fornisce una migliore UX rispetto alle convalide HTML5 predefinite. Devi scrivere solo alcune dichiarazioni e il gioco \u00e8 fatto. Parsley offre un ricco set di opzioni con cui puoi estendere le tue convalide personalizzate. Non ho intenzione di coprire ogni opzione. Lo scopo di questo tutorial \u00e8 farti familiarizzare con Parsley e mostrarti come applicare le convalide di base. \u00c8 possibile esplorare la loro documentazione e familiarizzare con tutte le funzionalit\u00e0 fornite dalla libreria.<\/p>\n

Per questo tutorial, creer\u00f2 un modulo semplice con pochi campi come nome, e-mail, genere, ecc. Tutti i campi del modulo sono obbligatori e applicheremo le convalide utilizzando Parsley sul nostro modulo.<\/p>\n

Per convalidare il modulo utilizzando Parsley, \u00e8 necessario includere il suo file JS. Lo far\u00f2 usando CDN.<\/p>\n

Parsley consiglia di utilizzare il proprio stile per i messaggi di errore. Ma a scopo di test, puoi utilizzare il loro file CSS disponibile su questo link<\/a>.<\/p>\n

Come usare il prezzemolo<\/h3>\n

A scopo dimostrativo, creer\u00f2 un modulo utilizzando Bootstrap. Quindi includer\u00f2 Bootstrap usando CDN insieme ai file Parsley. Includo anche jQuery poich\u00e9 Prezzemolo dipende da esso.<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/css\/bootstrap.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/parsleyjs.org\/src\/parsley.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<form class=\"form-horizontal\" id=\"signup_form\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputFirstName\" class=\"col-sm-2 control-label\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputFirstName\" name=\"first_name\" placeholder=\"First Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputLastName\" class=\"col-sm-2 control-label\">Last Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputLastName\" name=\"last_name\" placeholder=\"Last Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control\" id=\"inputEmail3\" name=\"email\" placeholder=\"Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Gender<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"gender\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"male\" required> Male\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"female\" required> Female\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Skills<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"skills\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"php\" required> PHP\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"mysql\" required> MySQL\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-offset-2 col-sm-10\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Sign in<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n\u00a0\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/js\/bootstrap.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/parsley.js\/2.9.2\/parsley.min.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0jQuery('#signup_form').parsley();\n<\/script><\/code><\/pre>\n
Nel codice sopra, ho incluso tutti i file JS e CSS richiesti utilizzando CDN. Infine ho usato $('#signup_form').parsley();<\/code>dove #signup_form \u00e8 l’id del modulo. Ora, quando premi direttamente il pulsante Invia, verranno visualizzati gli errori come mostrato nello screenshot qui sotto.<\/p>\n
\"Convalida<\/a><\/p>\n
Una volta che tutti gli errori sono stati corretti, Parsley ti consente di inviare un modulo che poi utilizzerai per l’elaborazione lato server.<\/p>\n
Spero che tu capisca la convalida del modulo HTML usando Parsley. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h3>\n