Barra laterale

programmazione:javascript:controllare_i_campi_di_un_form

Controllare i campi di un form

Autore: Fabio Di Matteo
Ultima revisione: 9/05/2011

Di seguito alcune funzioni che controllano i vari campi di un form e che in caso di errore scrivono un messaggio su un div.

Funzione descrizione
VerifyRequired(input, errordiv) controlla campo obbligatorio
VerifyEmail(input, errordiv) controlla campo email

Le funzioni

<script>
function VerifyEmail(input, errordiv)
{
	var status = false;     
	var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
		 if (input.value.search(emailRegEx) == -1) 
		 {
			  /*Cose da fare se il controllo fallisce*/
			  input.style.backgroundColor='#FF7F7F';
			  document.getElementById(errordiv).innerHTML= '<b>Inserire un indirizzo email valido.</b>'
		 } else {
			  status = true;
		 }
		 return status;
}
 
function VerifyRequired(input, errordiv)
{
	var status = false;     
	 if (input.value.length == 0) 
	 {
		  /*Cose da fare se il controllo fallisce*/
		  input.style.backgroundColor='#FF7F7F';
		  document.getElementById(errordiv).innerHTML= '<b>Campo richiesto.</b>'
	 } else {
		  status = true;
	 }
	 return status;
}
 
function CheckOnSubmit()
{
	var status =false;
	status=VerifyEmail(email,'emailerror');
	status=VerifyRequired(testo,'texterror');
	return status;
}				
 
 
 
 
</script>

Richiamare le funzioni prima dell'invio di un form

Per richiamare tutte le funzioni che ci servono prima dell'invio di un form possiamo richiamarne una terza nell'evento OnSubmit del nostro form nel modo seguente:

Attenzione internet explorer 8 sembra non tenere conto dello stato di uscita (true/false) dell'evento onSubmit

il form

<form action="mailto.php" method="post"  onSubmit="return CheckOnSubmit()">
			<label for="email">Tua email:</label>
			<input type="text" id="email" name="email" Onblur="VerifyEmail(this,\'emailerror\');" 	>
			<div style="float: right; color: #FF7F7F; " id="emailerror"></div>
 
			<div style="float: right; color: #FF7F7F; " id="texterror"></div>
			<textarea id="testo" name="testo" rows="10" cols="4" Onblur="VerifyRequired(this,\'texterror\')"></textarea>
 
			<div align="right">
			<button  name="invia" type="submit">Invia</button>
			</div>
		</form>

Se la funzione nell'evento onSubmit ritorna il valore false il form non viene inviato.

la funzione CheckOnSubmit()

<script>
function CheckOnSubmit()
{
   var status =false;
   status=VerifyEmail(email,'emailerror');
   status=VerifyRequired(testo,'texterror');
   return status;
}
</script>

programmazione/javascript/controllare_i_campi_di_un_form.txt · Ultima modifica: 18/04/2018 - 15:48 (modifica esterna)