Verifica della data inserita in un form ( utilizzando bootstrap )

MarcoGrazia

Utente Attivo
15 Dic 2009
793
16
18
59
Udine
www.stilisticamente.com
Ciao, io ci sto diventando pazzo da giorni e non è cosa :boxing:
In pratica sto creando uno script che generi dei tooltip sui campi data ( giorno, mese e anno ) quando si inserisce una data non valida ( es: 31 aprile, 30 febbraio, ecc. ).
tralasciando la questione del tooltip che è creato da Bootstrap, per il resto è semplice javascript ( a dire il vero c'è tanto jquey per la gestione degli eventi )
Ecco lo script incriminato:
Codice:
// Verifica data
	function verificaData( g, m, a ) {
		if ( m == 2 && a > 0 && g > 28 ) {
			//	regola per l'anno bisesto: (anno % 400 == 0 || (anno % 100 != 0 && anno % 4 == 0))
			$( '#giorno' ).popover( 'destroy' );
			if ( a % 400 == 0 || ( a % 100 != 0 && a % 4 == 0 )) {
				if ( g > 29 ) {
					$( '#giorno' ).popover({
						title: "<h4 style=\"color: red\">C'è un errore con l'anno bisestile</h4>",
						content: "<p>La data per questo mese di febbraio non può essere superiore al giorno 29.</p>",
						html: true,
						placement: "top auto"
					});
					$( '#giorno' ).popover( 'show' );
				}
			} else {
				$( '#giorno' ).popover( 'destroy' );
				if (g > 28 ) {
					$( '#giorno' ).popover({
						title: "<h4 style=\"color: red\">C'è un errore con il mese di febbraio</h4>",
						content: "<p>La data per questo mese di febbraio non può essere superiore al giorno 28.</p>",
						html: true,
						placement: "top auto"
					});
					$( '#giorno' ).popover( 'show' );
				}
			}
		}
		if ( g > 0 && m > 0 ) {
			switch ( m ) {
				//	Mesi di 30 giorni
				case 4: case 6: case 9: case 11:
					$( '#giorno' ).popover( 'destroy' );
					if ( g > 30 ) {
						$( '#giorno' ).popover({
							title: "<h4 style=\"color: red\">C'è un errore nella data</h4>",
							content: "<p>Per il mese selezionato, la data non può superare il giorno 30.</p>",
							html: true,
							placement: "top auto"
						});
						$( '#giorno' ).popover( 'show' );
					}
				break;
				case 2:
					$( '#giorno' ).popover( 'destroy' );
					if ( g > 28 && a == 0 ) {
						$( '#giorno' ).popover({
							title: "<h4 style=\"color: red\">C'è un errore con il mese di febbraio</h4>",
							content: "<p>La data per questo mese di febbraio non può essere superiore al giorno 28.</p>",
							html: true,
							placement: "top auto"
						});
						$( '#giorno' ).popover( 'show' );
					}
				break;
			}
		}
	};
	//	Verifica data di nascita
	$( '#giorno, #mese, #anno' ).bind({
		change: function() {
			//	Verifica del giorno relativo al mese selezionato e all'anno per il case del bisestile.
			verificaData( parseInt( $( '#giorno' ).val(), 10 ), parseInt( $( '#mese' ).val(), 10 ), parseInt( $( '#anno' ).val(), 10 ));
		}
	});
E questa la pagina online dove verificare quanto inserito: http://gamerama.altervista.org/iscrizione.php ( ovviamente non si può ancora iscrivere nulla ).
Se riuscite a darmi una mano ve ne sarò grato, io ci sto sbattendo la testa.
Grazie!

PS: so bene che ci sono script già pronti che fanno la stessa cosa, ma, non è divertente e ne si impara nulla a fare ctrl-c / ctrl-v :faraone:
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
ciao, non hai specificato il problema, ho provato ad inserire 31 febbraio ed è apparso l'avviso di errore data correttamente. cosa c'è che non va?
 

MarcoGrazia

Utente Attivo
15 Dic 2009
793
16
18
59
Udine
www.stilisticamente.com
Ho modificato il tutto e sta quasi funzionando, in pratica ho fatto come sempre, ovveroo verifica alla fine sul submit, così se sbagli non invia a prescindere dai passaggi che fai ( prima il giorno poi l'anno, poi il mese, poi cambio, poi rimetto, ecc. ).
Non funziona ancora perché mi va in loop quando rimetto la data giusta, ma è un problema che risolvo con calma, ora mi inizia il ferragosto ;-)

PS comunque il codice ( spaghetti code per ora ) è online.
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
Ho provato il tuo codice e quello che succede è che quando fai il submit della form, una volta effettuati i controlli, continua a venire intercettato dal javascript e a rifare il controllo all'infinito.

in teoria se togli l'input submit e lo sostituisci con un normale bottone o con un A travestito da bottone puoi intercettare il click al posto del submit ed effettuare il submit alla fine dei controlli da javascript.
 

MarcoGrazia

Utente Attivo
15 Dic 2009
793
16
18
59
Udine
www.stilisticamente.com
Ho provato il tuo codice e quello che succede è che quando fai il submit della form, una volta effettuati i controlli, continua a venire intercettato dal javascript e a rifare il controllo all'infinito.

in teoria se togli l'input submit e lo sostituisci con un normale bottone o con un A travestito da bottone puoi intercettare il click al posto del submit ed effettuare il submit alla fine dei controlli da javascript.
Ma infatti mi ero accorto pure io del loop infinito, solo che non riuscivo ad eliminarlo.
In realtà alla fine ho scelto di fare la verifica alla fine, cioè quando si chiede il submit, esattamente come si fa di solito e ha funzionato; ovviamente i problemi ora sono altri, ma faranno parte di un'altra domanda in un altro post.
Ah, anche io ho scelto di utilizzare <input type="button" .... il problema è che così se si ha un UA senza javascript non si può più inviare nulla.
Qui il codice:
HTML:
<input type="button" name="iscrivimi" class="btn btn-primary btn-lg btn-block" value="Invia &raquo;">
Codice:
//	Controllo delle date quando si prova a lanciare il form.
	$( 'input[name="iscrivimi"]' ).click( function(){
                var err = true;	//	Verifica dell'errore, iniziale a true.
		
		//	Errori relativi alla data.
		g = parseInt( $( '#giorno' ).val(), 10 ), 
		m = parseInt( $( '#mese' ).val(), 10 ), 
		a = parseInt( $( '#anno' ).val(), 10 );

                //	Se tutti i campi della data sono valorizzati proseguo.
		if ( g > 0 && m > 0 && a > 0 ) {
			//	Verifico il mese.
			switch ( m ) {
				case 4: case 6: case 9: case 11:
					if ( g > 30 ) {	//	Questi mesi hanno 30 giorni, se g è superiore do errore.
						$( '#giorno' ).popover( 'destroy' );
						$( '#giorno' ).popover({
							title: "<h4 style=\"color: red\">C'è un errore nella data</h4>",
							content: "<p>Per il mese selezionato, la data non può superare il giorno 30.</p>",
							html: true,
							placement: "left auto"
						});
						$( '#giorno' ).popover( 'show' );
						err = true;
					} else {
						//	Se era aperto un popover lo elimino e metto errore a false
						$( '#giorno' ).popover( 'destroy' );
						err = false;
					}
				break;
				case 2:	//	Mese di febbraio, un caso speciale!
					if ( a % 400 == 0 || ( a % 100 != 0 && a % 4 == 0 )) {
						//	Se l'anno è bisestile...
						if ( g > 29 ) {	//	...	e g è magiore di 29, da errore.
							$( '#giorno' ).popover( 'destroy' );
							$( '#giorno' ).popover({
								title: "<h4 style=\"color: red\">C'è un errore con l'anno bisestile</h4>",
								content: "<p>La data per questo mese di febbraio non può essere superiore al giorno 29.</p>",
								html: true,
								placement: "left auto"
							});
							$( '#giorno' ).popover( 'show' );
							err = true;
						} else {
							//	Se non è così elimino il popover e metto errore a false
							$( '#giorno' ).popover( 'destroy' );
							err = false;
						}
					} else {
						//	Se invece non lo è...
						if (g > 28 ) {	//	ma g è maggiore di 28, da errore.
							$( '#giorno' ).popover( 'destroy' );
							$( '#giorno' ).popover({
								title: "<h4 style=\"color: red\">C'è un errore con il mese di febbraio</h4>",
								content: "<p>La data per questo mese di febbraio non può essere superiore al giorno 28.</p>",
								html: true,
								placement: "left auto"
							});
							$( '#giorno' ).popover( 'show' );
							err = true;
						} else {
							//	Se è inferiore lo elimino e metto errore a false
							$( '#giorno' ).popover( 'destroy' );
							err = false;
						}
					}
				break;
				default: 
					$( '#giorno' ).popover( 'destroy' );	//	Tutto a posto e chiudo tutto.
					err = false;
			}
		}	//	Fine controllo della data.
		
		if ( !err ) {
			$( '#form-iscrizione').submit();
		} else {
			$( this ).popover( 'destroy' );
			$( this ).popover({
				title: "<h4 style=\"color: red\">C'è almeno un errore nel form</h4>",
				content: "<p>Il form contiene almeno un errore, correggilo o non posso inviare nulla.</p>",
				html: true,
				placement: "left auto"
			});
			$( this ).popover( 'show' );
			err = true;
		}
	});
	
});
Ovviamente in luogo del framework bootstrap si può usare qualsiasi altra cosa, avendo l'accortezza di realizzare in proprio i popover o qualsiasi altro modo per evidenziare gli errori.
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
se proprio vuoi fare una meraviglia potresti inserire il submit nel html della pagina e al caricamento lo sostituisci con l'input tramite javascript. in questo modo chi ha javascript passerà per la verifica chi non lo ha avrà il suo normale submit
 
Discussioni simili
Autore Titolo Forum Risposte Data
M verifica della @ PHP 6
MarcoGrazia Verifica di una stringa o di un nome proveniente da form Snippet PHP 0
D verifica codice fiscale persona fisica /aziendale stesso campo HTML e CSS 1
F [PHP] Verifica utente presente nel DB PHP 13
gandalf1959 [PHP] Verifica password per accesso ad area riservata PHP 3
M [Javascript] Verifica calcolo prima di fare insert Javascript 13
Samuele Ronzani [PHP] Verifica se un dato esiste già PHP 1
S [Javascript] Verifica separatore decimale sistema operativo Javascript 2
felino EXCEL: verifica dati mancanti tra due sheet Windows e Software 2
A Verifica validità data in Java Java 2
kikki882 verifica account - dati personali Social Media Marketing 0
S [PHP] Verifica dati tramite form e annullamento codice inserito PHP 7
L Wordpress: consiglio plugin per "verifica disponibilità" WordPress 0
MarcoGrazia Verifica di un indirizzo email Snippet PHP 0
MarcoGrazia [PHP] Verifica dell'input utente tramite funzione generica. PHP 0
francesco87 [Vendo] Verifica pagina (bollino grigio) Annunci servizi di Social Media Marketing 0
M [PHP] Verifica formato data in tempo reale PHP 2
WebDr [Javascript] verifica input Javascript 8
R [WordPress] Accesso al db e verifica credenziali (password criptata) WordPress 1
A VENDO ACCOUNT DI DIVERSE PIATTAFORME E VERIFICA FACEBOOK ACCOUNT(PHOTO TAG VERIFICATION,VERIFICA TEL Annunci servizi di Social Media Marketing 2
P verifica caratteri per email e password PHP 17
S Verifica Esistenza Codice Fiscale PHP 5
C verifica e invio ordine php PHP 19
G verifica caricamento foto originali su social network o sito di hosting immagini Discussioni Varie 3
A Strumenti "ufficiali" per la verifica dei Cookie HTML e CSS 2
A verifica di proprietà bing webmaster tool Google Webmaster Tools 0
P Verifica form solo con php senza javascript PHP 15
D Verifica inserimento dati form PHP 12
P verifica utente in db PHP 6
L [MySQL] Verifica disponibilità camera MySQL 32
L vendo account facebook femmina 5.000 amici con verifica cell e tag superati Annunci servizi di Social Media Marketing 0
V verifica form jQuery 5
filippino Verifica email per attribuzione dei contenuti SEO e Posizionamento 0
N Verifica email di registrazione PHP 0
D Verifica plug-in aggiornati di Firefox non vede gli aggiornamenti effettivi Windows e Software 0
il_bauscia Verifica segnale operatore 5ghz Reti LAN e Wireless 2
Virginia86 [risolto] Problema select e verifica form PHP 38
G php asincrono con ajax 2 campi di verifica PHP 1
P Problema ocon verifica campo in javascript Javascript 7
M Cosa ne pensate del mio primo file PHP (verifica disponibilità stanze)? PHP 0
M adsmanager e messaggio di verifica email Joomla 0
L verifica mail in db con jquery e ajax. Aiuto jQuery 9
asevenx modulo registrazione utenti, cicli if di verifica PHP 9
A Espressione Regolare per verifica stringa PHP 14
A verifica codice PHP 7
M Verifica HTTP o HTTPS PHP 1
M Verifica se una Funzione appartiene ad una Classe PHP 9
F Esiste un programma che verifica la home page e la corregge automaticamente? HTML e CSS 7
P problema verifica dati Ajax 58
P Verifica form misto php e JS Javascript 2

Discussioni simili