[JS] Validare campo data se contiene valori: lo strano caso

[davidec84]

Carissimi,

prima di esporvi il mio "strano caso" di riutilizzo del condice vi premetto che ogni volta che mi imbatto nella validazione dei campi con JS, e nello specifico nel controllo della data, accuso sempre un dolore psico-somatico allo stomaco che mi rende schiavo dei servizi igienici di casa mia.

Detto questo vengo al dunque; grazie agli script di html.it (ho tutti i cd del 2008) sono riuscito alcuni anni fa ad integrare senza grossi problemi un sistema di controlli JS su alcuni mie form.

Ecco un esempio su tutti:

<script type="text/javascript" language="JavaScript">
<!--
  function Modulo() {

	var n_pratica = document.modulo.n_pratica.value;
	var data_pratica = document.modulo.data_pratica.value;


	if ((isNaN(n_pratica)) || (n_pratica == "undefined")) {
           alert("Il campo N. Pratica puo' contenere solo valori numerici.");
           document.modulo.n_pratica.value = "";
           document.modulo.n_pratica.focus();
           return false;
     }

	else if (data_pratica != ""){

	 if (document.modulo.data_pratica.value.substring(2,3) != "/" || 
           document.modulo.data_pratica.value.substring(5,6) != "/" ||
           isNaN(document.modulo.data_pratica.value.substring(0,2)) ||
           isNaN(document.modulo.data_pratica.value.substring(3,5)) ||
           isNaN(document.modulo.data_pratica.value.substring(6,10))) {
             alert("Inserire Data Pratica in formato gg/mm/aaaa");
             document.modulo.data_pratica.value = "";
             document.modulo.data_pratica.focus();
             return false;
	        }
	        else if (document.modulo.data_pratica.value.substring(0,2) > 31) {
				alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
		        document.modulo.data_pratica.select();
	           return false;
	        }

			else if (document.modulo.data_pratica.value.substring(3,5) > 12) {
				alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
	           document.modulo.data_pratica.value = "";
	           document.modulo.data_pratica.focus();
	           return false;
	        }

			else if (document.modulo.data_pratica.value.substring(6,10) < 1900) {
	           alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
		       document.modulo.data_pratica.value = "";
	           document.modulo.data_pratica.focus();
	           return false;
	        }

		}

        else {
           document.modulo.action = "admin.php?p=cerca_pratica";
           document.modulo.submit();  
	

        }

  }
//-->
</script>
						
<form method="POST" name="modulo">
N. Ordine Pratica<input type="text" name="n_pratica" id="n_pratica" value=""/> del <input type="text" name="data_pratica" id="data_pratica" />
			Tecnico di parte<input type="text" name="tecnico" id="tecnico" value="" size="48"/>
            Cognome Utente<input type="text" name="nominativo" id="nominativo" value=""  size="48"/>
<input name="button" type="button" onClick="Modulo()" value="Cerca" class="button">
</form>

Quindi: se il valore del campo data_pratica non rispetta il formato gg/mm/aaaa mi restituirà un alert che mi inviterà a correggere il formato data; se invece il valore è corretto o se il campo risulta vuoto questo script procede al POST dei dati alla pagina "admin.php?p=cerca_pratica".

Riportando lo stesso script in un'altro form invece:
- se il campo contiene un valore errato: restituisce l'alert
- se il campo è vuoto: esegue il POST
- se il campo contiene la data nel formato corretto: cliccando sul tasto (submit) non succede nulla!!!!!

[davidec84]

Ecco lo script incriminato, spero di avere una mano da parte vostra, grazie.

<script type="text/javascript" language="JavaScript">

<!--

  function Modulo() {
	var n_pratica = document.modulo.n_pratica.value;
	var data_pratica = document.modulo.data_pratica.value;
	var tecnico = document.modulo.tecnico.value;
	var nominativo = document.modulo.nominativo.value;
	var data_nascita = document.modulo.data_nascita.value;
	var indirizzo = document.modulo.indirizzo.value;
	var data_completamento = document.modulo.data_completamento.value;

	if ((n_pratica == "") || (n_pratica == "undefined")) {
           alert("Il campo N. Pratica e' obbligatorio.");
           document.modulo.n_pratica.focus();
           return false;
    } 


	else if ((data_pratica == "") || (data_pratica == "undefined")) {
           alert("Il campo Data Pratica e' obbligatorio.");
           document.modulo.data_pratica.focus();
           return false;
    } 

	else if ((tecnico == "") || (tecnico == "undefined")) {
           alert("Il campo Tecnico di parte e' obbligatorio.");
           document.modulo.tecnico.focus();
           return false;
    } 

	else if ((nominativo == "") || (nominativo == "undefined")) {
           alert("Il campo Cognome e Nome Utente e' obbligatorio.");
           document.modulo.nominativo.focus();
           return false;
    } 

	else if ((data_nascita == "") || (data_nascita == "undefined")) {
           alert("Il campo Data di nascita Utente e' obbligatorio.");
           document.modulo.data_nascita.focus();
           return false;
    } 

	else if ((indirizzo == "") || (indirizzo == "undefined")) {
           alert("Il campo Indirizzo Utente e' obbligatorio.");
           document.modulo.indirizzo.focus();
           return false;
    } 

	else if ((isNaN(n_pratica)) || (n_pratica == "undefined")) {
           alert("Il campo N. Pratica puo' contenere solo valori numerici.");
           document.modulo.n_pratica.value = "";
           document.modulo.n_pratica.focus();
           return false;
     }


	else if (document.modulo.data_pratica.value.substring(2,3) != "/" || 
           document.modulo.data_pratica.value.substring(5,6) != "/" ||
           isNaN(document.modulo.data_pratica.value.substring(0,2)) ||
           isNaN(document.modulo.data_pratica.value.substring(3,5)) ||
           isNaN(document.modulo.data_pratica.value.substring(6,10))) {
             alert("Inserire Data Pratica in formato gg/mm/aaaa");
             document.modulo.data_pratica.value = "";
             document.modulo.data_pratica.focus();
             return false;
	        }
	        else if (document.modulo.data_pratica.value.substring(0,2) > 31) {
				alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
		        document.modulo.data_pratica.select();
	           return false;
	        }

			else if (document.modulo.data_pratica.value.substring(3,5) > 12) {
				alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
	           document.modulo.data_pratica.value = "";
	           document.modulo.data_pratica.focus();
	           return false;
	        }

			else if (document.modulo.data_pratica.value.substring(6,10) < 1900) {
	           alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
		       document.modulo.data_pratica.value = "";
	           document.modulo.data_pratica.focus();
	           return false;
	        }


	else if ((tecnico == "") || (tecnico == "undefined")) {
	           alert("Il campo Tecnico di parte e' obbligatorio.");
	           document.modulo.tecnico.focus();
	           return false;
	        } 

	else if ((nominativo == "") || (nominativo == "undefined")) {
	           alert("Il campo Cognome e Nome Utente e' obbligatorio.");
	           document.modulo.nominativo.focus();
	           return false;
	        } 

	else if (document.modulo.data_nascita.value.substring(2,3) != "/" || 
           document.modulo.data_nascita.value.substring(5,6) != "/" ||
           isNaN(document.modulo.data_nascita.value.substring(0,2)) ||
           isNaN(document.modulo.data_nascita.value.substring(3,5)) ||
           isNaN(document.modulo.data_nascita.value.substring(6,10))) {
             alert("Inserire Data di nascita Utente in formato gg/mm/aaaa");
             document.modulo.data_nascita.value = "";
             document.modulo.data_nascita.focus();
             return false;
	        }
	        else if (document.modulo.data_nascita.value.substring(0,2) > 31) {
				alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
		        document.modulo.data_nascita.select();
	           return false;
	        }

			else if (document.modulo.data_nascita.value.substring(3,5) > 12) {
				alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
	           document.modulo.data_nascita.value = "";
	           document.modulo.data_nascita.focus();
	           return false;
	        }

			else if (document.modulo.data_nascita.value.substring(6,10) < 1900) {
	           alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
		       document.modulo.data_nascita.value = "";
	           document.modulo.data_nascita.focus();
	           return false;
	        }


		 else if (data_completamento != ""){
        //Effettua il controllo sul campo DATA COMPLETAMENTO
         if (document.modulo.data_completamento.value.substring(2,3) != "/" ||
           document.modulo.data_completamento.value.substring(5,6) != "/" ||
           isNaN(document.modulo.data_completamento.value.substring(0,2)) ||
           isNaN(document.modulo.data_completamento.value.substring(3,5)) ||
           isNaN(document.modulo.data_completamento.value.substring(6,10))) {
           alert("Inserire Data Completamento in formato gg/mm/aaaa");
           document.modulo.data_completamento.value = "";
           document.modulo.data_completamento.focus();
           return false;
        }
         else if (document.modulo.data_completamento.value.substring(0,2) > 31) {
	        alert("Impossibile utilizzare un valore superiore a 31 per i giorni");
	        document.modulo.data_completamento.select();
	        return false;
        }
         else if (document.modulo.data_completamento.value.substring(3,5) > 12) {
           alert("Impossibile utilizzare un valore superiore a 12 per i mesi");
           document.modulo.data_completamento.value = "";
           document.modulo.data_completamento.focus();
           return false;
        }
          else if (document.modulo.data_completamento.value.substring(6,10) < 1900) {
           alert("Impossibile utilizzare un valore inferiore a 1900 per l'anno");
           document.modulo.data_completamento.value = "";
           document.modulo.data_completamento.focus();
           return false;
        }
		 }


        else {
           document.modulo.action = "admin.php?p=post_mod_pratica";
           document.modulo.submit();  


        }

  }
//-->
</script>

<form method="POST" name="modulo">

N.ro <input type="text" name="n_pratica" id="n_pratica" value=""/> del <input type="text" name="data_pratica" id="data_pratica" value=""/>
Tecnico di parte<input type="text" name="tecnico" id="tecnico" value="" size="48" />
Cognome e Nome <input type="text" name="nominativo" id="nominativo" value=""/>
Data di nascita </td><td><input type="text" name="data_nascita" id="data_nascita" value=""/>Indirizzo<input type="text" name="indirizzo" id="indirizzo" value=""/>
La pratica &egrave; incompleta per il rilascio della concessione ediliza in sanatoria per mancanza di:[/b]</h3>Versamento diritti di segreteria &euro; 500,00<input type="checkbox" name="diritti_segreteria" id="diritti_segreteria" value="1"/>
Versamento diritti di segreteria per trascrizione &euro; 25,82<input type="checkbox" name="diritti_trascrizione" id="diritti_trascrizione" value="1"/>Versamento di oneri concessori &euro; <input type="text" name="importo_oneri_concessori" value="" size="10"/><input type="checkbox" name="oneri_concessori" id="oneri_concessori" value="1"/>Accatastamento<input type="checkbox" name="accatastamento" id="accatastamento" value="1"/>Parere Genio Civile<input type="checkbox" name="genio_civile" id="genio_civile" value="1"/>Parere Sovrintendenza BB. CC. AA.<input type="checkbox" name="sovrintendenza" id="sovrintendenza" value="1"/>
Parere Demanio Marittimo</td><td><input type="checkbox" name="demanio_marittimo" id="demanio_marittimo" value="1"/>
Parere Anas</td><td><input type="checkbox" name="anas" id="anas" value="1"/>Parere Provincia</td><td><input type="checkbox" name="provincia" id="provincia" value="1"/>Parere Ferrovie<input type="checkbox" name="ferrovie" id="ferrovie" value="1"/>Autorizzazione allo Scarico<input type="checkbox" name="autorizzazione_scarico" id="autorizzazione_scarico" value="1"/>Altro <input type="text" name="altro" id="altro" value=""/>;
Pratica completata in data (gg/mm/aaaa) <input type="text" name="data_completamento" id="data_completamento" value=""/>
in attesa di concessione edilizia in sanatoria </td><td><input type="checkbox" name="rilascio_concessione" id="rilascio_concessione" value="1"/>
<input name="button" type="button" onClick="Modulo()" value="Invia" class="button">
</form>

*Non fate caso alla formattazione,ho dovuto togliere un po di testo perchè ho superato il limite dei caratteri

[davidec84]

Dimenticavo: il campincriminato è data_completamento!!!

[cavicchiandrea]

Originariamente inviato da davidec84
Carissimi,

prima di esporvi il mio "strano caso" di riutilizzo del condice vi premetto che ogni volta che mi imbatto nella validazione dei campi con JS, e nello specifico nel controllo della data, accuso sempre un dolore psico-somatico allo stomaco che mi rende schiavo dei servizi igienici di casa mia.

Per questo problema potresti provare imodium per il problema date posta un link ad una pagina demo

[Massimo61]

Ciao,

// else {
document.modulo.action = "admin.php?p=post_mod_pratica";
document.modulo.submit();


// }


M.

[davidec84]

Originariamente inviato da cavicchiandrea
Per questo problema potresti provare imodium per il problema date posta un link ad una pagina demo

http://www.w3soft.it/test/nonfunziona1.html

X Massimo 61

Grazie Massimo, funziona egregiamente se applico la modifica che mi hai consigliato.

Mi chiedo come mai nello script originale metteva l'else finale.

Grazie!

[Massimo61]

Ciao,

l'else non serve, ma il problema sono le graffe,

dopo l'ultimo if

document.modulo.data_completamento.focus();
return false;
}

}


chiudi con due graffe invece di una.

Tenendo l'else

document.modulo.data_completamento.focus();
return false;
}

// }


else {
document.modulo.action = "admin.php?p=post_mod_pratica";
document.modulo.submit();
}

}

}


richiama la function con l'istruzione return

onClick="return Modulo()"


M.

[carlomarx]

io semplificherei di brutto...

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
	// le seguenti righe di codice sono necessarie per rendere lo script compatibile con i vecchi browser; possono essere rimosse senza danno per i nuovi browser.
	if (!Array.prototype.every) {
		Array.prototype.every = function(fValidator /*, oThisObj */) {
			"use strict";
			if (this === void 0 || this === null) { throw new TypeError(); }
			var aThisArray = Object(this);
			var nLength = aThisArray.length >>> 0;
			if (typeof fValidator !== "function") { throw new TypeError(); }
			var oThisObj = arguments[1];
			for (var iIndex = 0; iIndex < nLength; iIndex++) { if (iIndex in aThisArray && !fValidator.call(oThisObj, aThisArray[iIndex], iIndex, aThisArray)) { return false; } }
			return true;
		};
	}
	// fine delle righe di codice per la compatibilità

	function validateForm() {
		var sNPratica = document.modulo.n_pratica.value;
		if (!sNPratica || /\D/.test(sNPratica)) {
			alert("Il campo N. Pratica deve contenere solo valori numerici.");
			document.modulo.n_pratica.value = sNPratica.replace(/\D/g, "");
			document.modulo.n_pratica.focus();
			return false;
		}
		var iDateSegm, aInputDate = document.modulo.data_pratica.value.split("/"), nInDateLen = aInputDate.length;
		if (nInDateLen !== 3) { alert("Inserire Data Pratica in formato gg/mm/aaaa"); return false; }
		else {
			for (var iSegmId = 0; iSegmId < nInDateLen; iSegmId++) {
				iDateSegm = aInputDate[iSegmId];
				if (/\D/.test(iDateSegm)) { alert("La data pu\u00F2 contenere solo numeri separati da \"\/\"."); return false; }
				else { aInputDate[iSegmId] = parseFloat(iDateSegm); }
			}
			var oParsedDate = new Date(aInputDate[2], aInputDate[1] - 1, aInputDate[0]), aOutputDate = [oParsedDate.getDate(), oParsedDate.getMonth() + 1, oParsedDate.getFullYear()];
			if (!aOutputDate.every(function (vThisValue, nThisIndex /*, aTheArray */) {
				if (this[nThisIndex] === vThisValue) { return true };
				return false;
			}, aInputDate)) { return confirm("La data immessa \u00E8 stata corretta in " + aOutputDate.join("/") + ". Confermare se la data corrisponde al valore che si voleva indicare, altrimenti annullare per apportare delle modifiche."); }
			return false;
			
		}
		return true;
	}
</script>
</head>

<body>
						
<form method="POST" name="modulo" action="admin.php?p=cerca_pratica" onsubmit="return(validateForm());">
N. Ordine Pratica<input type="text" name="n_pratica" id="n_pratica" value=""/> del <input type="text" name="data_pratica" id="data_pratica" />
			Tecnico di parte<input type="text" name="tecnico" id="tecnico" value="" size="48"/>
            Cognome Utente<input type="text" name="nominativo" id="nominativo" value=""  size="48"/>
<input name="button" type="submit" value="Cerca" class="button">
</form>

</body>
</html>

[davidec84]

Originariamente inviato da carlomarx
io semplificherei di brutto...

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
	if (!Array.prototype.every) {
		Array.prototype.every = function(fValidator /*, oThisObj */) {
			"use strict";
			if (this === void 0 || this === null) { throw new TypeError(); }
			var aThisArray = Object(this);
			var nLength = aThisArray.length >>> 0;
			if (typeof fValidator !== "function") { throw new TypeError(); }
			var oThisObj = arguments[1];
			for (var iIndex = 0; iIndex < nLength; iIndex++) { if (iIndex in aThisArray && !fValidator.call(oThisObj, aThisArray[iIndex], iIndex, aThisArray)) { return false; } }
			return true;
		};
	}

	function validateForm() {
		var sNPratica = document.modulo.n_pratica.value;
		if (!sNPratica || /\D/.test(sNPratica)) {
			alert("Il campo N. Pratica deve contenere solo valori numerici.");
			document.modulo.n_pratica.value = sNPratica.replace(/\D/g, "");
			document.modulo.n_pratica.focus();
			return false;
		}
		var iDateSegm, aInputDate = document.modulo.data_pratica.value.split("/"), nInDateLen = aInputDate.length;
		if (nInDateLen !== 3) { alert("Inserire Data Pratica in formato gg/mm/aaaa"); return false; }
		else {
			for (var iSegmId = 0; iSegmId < nInDateLen; iSegmId++) {
				iDateSegm = aInputDate[iSegmId];
				if (/\D/.test(iDateSegm)) { alert("La data pu\u00F2 contenere solo numeri separati da \"\/\"."); return false; }
				else { aInputDate[iSegmId] = parseFloat(iDateSegm); }
			}
			var oParsedDate = new Date(aInputDate[2], aInputDate[1] - 1, aInputDate[0]), aOutputDate = [oParsedDate.getDate(), oParsedDate.getMonth() + 1, oParsedDate.getFullYear()];
			if (!aOutputDate.every(function (vThisValue, nThisIndex /*, aTheArray */) {
				if (this[nThisIndex] === vThisValue) { return true };
				return false;
			}, aInputDate)) { return confirm("La data immessa \u00E8 stata corretta in " + aOutputDate.join("/") + ". Confermare se la data corrisponde al valore che si voleva indicare, altrimenti annullare per apportare delle modifiche."); }
			return false;
			
		}
		return true;
	}
</script>
</head>

<body>
						
<form method="POST" name="modulo" action="admin.php?p=cerca_pratica" onsubmit="return(validateForm());">
N. Ordine Pratica<input type="text" name="n_pratica" id="n_pratica" value=""/> del <input type="text" name="data_pratica" id="data_pratica" />
			Tecnico di parte<input type="text" name="tecnico" id="tecnico" value="" size="48"/>
            Cognome Utente<input type="text" name="nominativo" id="nominativo" value=""  size="48"/>
<input name="button" type="submit" value="Cerca" class="button">
</form>

</body>
</html>

Al compagno CarloMax

ti ringrazio per la "semplificazione", però nutro alcune perplessità (probabilmente perchè sono di destra XD)

- E' necessario che lo script stia necessariamente dentro <head>? Questa pagina è parte di un software sviluppato in php e vorei evitare modifiche dell'header.

- Qual'è la differenza tra

action="admin.php?p=cerca_pratica" onsubmit="return(validateForm());"

e

action="admin.php?p=cerca_pratica" onsubmit="validateForm();"

o ancora semplicemente

 onclick="validateForm()"

come utilizzato da me;

- Per il controllo dei campi obbligatori, di quelli numerici, delle e.mail etc. posso sempre utilizzare
if ((isNaN(n_pratica)) || (n_pratica == "undefined")) {
alert("Il campo N. Pratica puo' contenere solo valori numerici.");
document.modulo.n_pratica.value = "";
document.modulo.n_pratica.focus();
return false;
}

e compagnia bella?

Grazie

[carlomarx]

Originariamente inviato da davidec84
ti ringrazio per la "semplificazione", però nutro alcune perplessità (probabilmente perchè sono di destra XD)

Eh, lo so, è dura stare dalla parte di quelli generalmente meno colti

Originariamente inviato da davidec84
- E' necessario che lo script stia necessariamente dentro <head>?

No, puoi inserirlo dove più ti aggrada.

Originariamente inviato da davidec84
- Qual'è la differenza tra

action="admin.php?p=cerca_pratica" onsubmit="return(validateForm());"

e

action="admin.php?p=cerca_pratica" onsubmit="validateForm();"

o ancora semplicemente

 onclick="validateForm()"

come utilizzato da me;

&hellip;che con la mia soluzione fa meno operazioni. Il secondo esempio non funziona. Per il terzo esempio devi modificare lo script.

Originariamente inviato da davidec84
- Per il controllo dei campi obbligatori, di quelli numerici, delle e.mail etc. posso sempre utilizzare
if ((isNaN(n_pratica)) || (n_pratica == "undefined")) {
alert("Il campo N. Pratica puo' contenere solo valori numerici.");
document.modulo.n_pratica.value = "";
document.modulo.n_pratica.focus();
return false;
}

e compagnia bella?

Grazie

n_pratica == "undefined" è un non senso; isNaN(n_pratica) dà false anche qualora n_pratica corrispondesse a uno spazio bianco, controlla di persona&hellip;

alert(isNaN("questa \u00E8 una stringa"));
alert(isNaN(" "));

&hellip;quindi la risposta è no, non puoi utilizzarlo.

P.S. Sto leggendo adesso che lo script è parte di una serie di controlli più ampia. Ti consiglio di muoverti così. Prendi il mio script e applicalo alla tua pagina. Come avrai notato il mio script ha questa struttura:

function validateForm() {
	if (CONDIZIONE1) { alert("qualcosa"); return false; }
	if (CONDIZIONE2) { alert("qualcosa"); return false; }
	if (CONDIZIONE3) { alert("qualcosa"); return false; }
	//etc. etc.
	return true;
}

Ti conviene continuare ad elencare altre condizioni allo stesso modo, appena prima di return true, che creino un return false in caso di errore. Non usare gli else if con i return, usa solo gli if.