{"id":1172,"date":"2012-05-10T11:21:36","date_gmt":"2012-05-10T10:21:36","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/?p=1172"},"modified":"2016-02-03T17:30:13","modified_gmt":"2016-02-03T16:30:13","slug":"jquery-php-validazione-dei-campi-di-un-form-prima-dellinvio","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/1172\/jquery-php-validazione-dei-campi-di-un-form-prima-dellinvio\/","title":{"rendered":"JQuery, PHP – Validazione dei campi di un form prima dell\u2019invio"},"content":{"rendered":"

Tempo fa abbiamo visto come controllare codice fiscale, partita iva, email e prezzo proveniente da un form attraverso l\u2019uso di funzioni in php<\/a>. Questo controllo avviene, naturalmente, dopo l\u2019invio dei dati alla pressione di un tasto da parte dell\u2019utente.<\/p>\n

Con l\u2019uso incrociato di php e di jquery abbiamo la possibilit\u00e0 di fare i controlli a monte, cio\u00e8 prima del submit del form<\/strong>. I controlli saranno effettuati questa volta da lato utente e i dati saranno inviati al server solo se non si incontreranno errori.<\/p>\n

Nel file da scaricare troverete:
\n– jquery.js<\/code> : necessario per importare le librerie di jquery.
\n– style.css<\/code> : formatta il layout del form; personalizzabile a vostra discrezione.
\n– index.php<\/code> : il cuore dello script, che andremo a vedere qui sotto.<\/p>\n

Lo script pu\u00f2 essere preso cos\u00ec com’\u00e8 senza modifiche (a eccezione, naturalmente, dell\u2019aspetto grafico che si deve integrare con il vostro sito). Oltre al controllo che i campi non siano vuoti, nello specifico troveremo la funzione per controllare una data e un\u2019email passate<\/strong>.<\/p>\n\n

Download script<\/h2>\n
\n
\"[JQUERY,<\/div>\n
Pagina diretta alla scheda e al download del codice<\/a><\/strong><\/div>\n <\/div>\n
<\/div>\n

Il form<\/h2>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18<\/pre>\n<\/td>\n
\n
\u00a0\r\n<form<\/span> action<\/span>=<\/span>\"\"<\/span> method<\/span>=<\/span>\"post\"<\/span> name<\/span>=<\/span>\"form_utente\"<\/span> id<\/span>=<\/span>\"form_utente\"<\/span>><\/span>\r\n\r\n    <div<\/span> class<\/span>=<\/span>\"campo\"<\/span>><\/span>\r\n        <div<\/span> class<\/span>=<\/span>\"nome_campo\"<\/span>><\/span>Nome<\/<\/span>div<\/span>><\/span>\r\n        <input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"nome\"<\/span> id<\/span>=<\/span>\"nome\"<\/span> value<\/span>=<\/span>\"<?php if(isset($_POST['nome'])) echo $_POST['nome'];?><\/span><\/span>\" class=\"input\" \/>\r\n    <\/<\/span>div<\/span>><\/span>\r\n\r\n    <div<\/span> class<\/span>=<\/span>\"clear\"<\/span>><\/<\/span>div<\/span>><\/span>\r\n\r\n    [...]\r\n\r\n    <a<\/span> href<\/span>=<\/span>\"javascript:void(0)\"<\/span> onclick<\/span>=<\/span>\"check_reg();\"<\/span> style<\/span>=<\/span>\"margin-top:22px;\"<\/span>><\/span>Invia<\/<\/span>a<\/span>><\/span>\r\n\r\n    <div<\/span> class<\/span>=<\/span>\"clear\"<\/span>><\/<\/span>div<\/span>><\/span>\r\n\r\n<\/<\/span>form<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
<\/p>\n
Il form avr\u00e0 campi simili tra loro, per quanto riguarda la struttura (la parentesi quadra con i puntini sostituisce tutti gli altri campi, che troverete nello script da scaricare). In particolare, ogni input avr\u00e0:
\n– un attributo id<\/code> con valore associato (i controlli in jquery si riferiranno a questi attributi).
\n– un controllo in php nell’attributo value<\/code>: in caso di errore, il form non sar\u00e0 inviato e la variabile in post sar\u00e0 ripresa, in modo che l’utente abbia ancora a disposizione i dati che ha inserito.<\/p>\n
L’attributo id=\"form_utente\"<\/code> ci \u00e8 indispensabile per inviare il form.<\/strong> Una volta effettuati i controlli in jquery, se tutto sar\u00e0 andato a gonfie vele, si far\u00e0 automaticamente il submit del form che ha associato questo attributo.<\/p>\n
Il controllo inizier\u00e0 non appena l’utente cliccher\u00e0 sul link “Invia”. Il link non porta a nessuna pagina, ma avvia la funzione check_reg()<\/code> che si occuper\u00f2 di effettuare i vari controlli nei campi.<\/p>\n\n
I controlli con jquery<\/h2>\n
Per comodit\u00e0 di forma, i valori degli id<\/code> dei vari campi input obbligatori sono stati messi in un array php.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7<\/pre>\n<\/td>\n
\n
\/\/metto il nome degli id dei campi in un array<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"nome\"<\/span>;<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"cognome\"<\/span>;<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"sesso\"<\/span>;<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"data_nascita\"<\/span>;<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"telefono\"<\/span>;<\/span>\r\n$id_campi<\/span>[<\/span>]<\/span>=<\/span>\"email\"<\/span>;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
In questo modo ci sar\u00e0 facile, attraverso un ciclo, stampare nel sorgente della pagina il controllo affinch\u00e9 tutti i campi non siano vuoti:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9<\/pre>\n<\/td>\n
\n
<!-- Controllo che i campi non siano vuoti -->\r\n<?php<\/span> foreach<\/span>(<\/span>$id_campi<\/span> as<\/span> $value<\/span>)<\/span>{<\/span>?><\/span>\r\nif($('#<?=<\/span>$value<\/span>?><\/span>').val()==\"\"){\r\n\tcheck=true;\r\n\t$('#<?=<\/span>$value<\/span>?><\/span>').addClass(\"errore\");\r\n}else{\r\n\t$('#<?=<\/span>$value<\/span>?><\/span>').removeClass(\"errore\");\r\n}\r\n<?<\/span> }<\/span>?><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Come si pu\u00f2 notare, in caso di errore si aggiunge all’input<\/strong> (che ha id<\/code> pari al valore passato) una classe css chiamata “errore”<\/strong> (nel mio caso, borda semplicemente di rosso il campo di input corrispondente).<\/p>\n
Una volta che ci siamo assicurati che tutti i campi obbligatori non siano vuoti, ci occupiamo con delle funzioni specifiche di controllare la correttezza della data e dell’email<\/strong> passate. Anche in questo caso, in caso di errore sar\u00e0 aggiunta la classe “errore”:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25<\/pre>\n<\/td>\n
\n
<!--<\/span> Data di nascita --><\/span>\r\nif<\/span>(<\/span> (<\/span>$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>2<\/span>,<\/span>3<\/span>)<\/span>!=<\/span>\"\/\"<\/span> &&<\/span> $(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>2<\/span>,<\/span>3<\/span>)<\/span>!=<\/span>\"-\"<\/span>)<\/span> ||<\/span>\r\n\t(<\/span>$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>5<\/span>,<\/span>6<\/span>)<\/span>!=<\/span>\"\/\"<\/span> &&<\/span> $(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>5<\/span>,<\/span>6<\/span>)<\/span>!=<\/span>\"-\"<\/span>)<\/span> ||<\/span>\r\n\tisNaN(<\/span>$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>0<\/span>,<\/span>2<\/span>)<\/span>)<\/span> ||<\/span>\r\n\tisNaN(<\/span>$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>3<\/span>,<\/span>5<\/span>)<\/span>)<\/span> ||<\/span>\r\n\tisNaN(<\/span>$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>6<\/span>,<\/span>10<\/span>)<\/span>)<\/span> ||<\/span>\r\n\t$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>0<\/span>,<\/span>2<\/span>)<\/span>><\/span>31<\/span> ||<\/span>\r\n\t$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>3<\/span>,<\/span>5<\/span>)<\/span>><\/span>12<\/span> ||<\/span>\r\n\t$(<\/span>'#data_nascita'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>.substring<\/span>(<\/span>6<\/span>,<\/span>10<\/span>)<\/span><<\/span>1900<\/span>\r\n)<\/span>{<\/span>\r\n\tcheck=<\/span>true<\/span>;<\/span>\r\n\t$(<\/span>'#data_nascita'<\/span>)<\/span>.addClass<\/span>(<\/span>\"errore\"<\/span>)<\/span>;<\/span>\r\n}<\/span>else<\/span>{<\/span>\r\n\t$(<\/span>'#data_nascita'<\/span>)<\/span>.removeClass<\/span>(<\/span>\"errore\"<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\n<!--<\/span> Email --><\/span>\r\nvar<\/span> email_check=<\/span>\/^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-]{2,})+\\.)+([a-zA-Z0-9]{2,})+$\/<\/span>;<\/span>\r\nif<\/span>(<\/span>!<\/span>email_check.test<\/span>(<\/span>$(<\/span>'#email'<\/span>)<\/span>.val<\/span>(<\/span>)<\/span>)<\/span>)<\/span>{<\/span>\r\n\tcheck=<\/span>true<\/span>;<\/span>\r\n\t$(<\/span>'#email'<\/span>)<\/span>.addClass<\/span>(<\/span>\"errore\"<\/span>)<\/span>;<\/span>\r\n}<\/span>else<\/span>{<\/span>\r\n\t$(<\/span>'#email'<\/span>)<\/span>.removeClass<\/span>(<\/span>\"errore\"<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Infine, se tutto \u00e8 andato per il meglio e non si sono riscontrati errori, sar\u00e0 fatto il submit del form<\/strong> e saranno passati come post i valori inseriti dall’utente:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4<\/pre>\n<\/td>\n
\n
<!--<\/span> invio del form in<\/span> caso non siano stati riscontrati errori --><\/span>\r\nif<\/span>(<\/span>check==<\/span>false<\/span>)<\/span>{<\/span>\r\n\tdocument.getElementById<\/span>(<\/span>\"form_utente\"<\/span>)<\/span>.submit<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Una semplice integrazione tra jquery e php per validare un form prima dell’invio. Oltre ai campi input comuni, vediamo funzioni specifiche per le email e le date.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[12,11,4,6],"class_list":["post-1172","post","type-post","status-publish","format-standard","hentry","category-php-mysql","tag-javascript","tag-jquery","tag-php","tag-script","cat-78-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1172"}],"collection":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/comments?post=1172"}],"version-history":[{"count":12,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1172\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1172\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/media?parent=1172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/categories?post=1172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/tags?post=1172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}