Rendere obbligatori i campi di un form

Un semplice esempio per comprendere come obbligare il riempimento di un campo

Immaginiamo di avere a che fare con un form molto semplice, uno che richiede l’inserimento di nome e cognome, come questo

<form action="LANOSTRAACTION" method="POSTOGET" >
	Nome <input type="text" name="nome" />
	Cognome <input type="text" name="cognome" />
	<input type="submit" value="Submit" />
</form>

Non è importante che sia un form di tipo POST o GET, quello che ci interessa è obbligare l’utente finale al riempimento di almeno uno dei campi, e per fare questo possiamo utilizzare javascript.

//funzione che si aspetta in input un array di stringhe
function testiObbligatori(campiTesto){
	//cicliamo i valori nell'array di stringhe
	for(let i = 0; i < campiTesto.length; i++) {
		//recuperiamo il valore associato all'elemento dell'array di stringhe
		var campo = document.getElementsByName(campiTesto[i]);
		//se il valore del campo è vuoto sarà evidenziato il campo indicato e sarà visualizzato l'errore che richiede la presenza del campo evidenziato e blocca il passaggio del form
		if (campo[0].value=="") {
			campo[0].focus();
			alert("Il campo "+campo[0].name+" deve essere valorizzato");
			return false;
		}
	}
}

La funzione testiObbligatori prevede al suo ingresso un array di stringhe, stringhe che coincideranno con il name di ogni singolo input che vogliamo rendere obbligatorio. Dopo aver incollato la funzione javascript dobbiamo implementarla nel tag form all’interno dell’attributo onSubmit, in questo modo

<form onSubmit="return testiObbligatori(['nome','cognome');" action="LANOSTRAACTION" method="POSTOGET" >
	Nome <input type="text" name="nome" />
	Cognome <input type="text" name="cognome" />
	<input type="submit" value="Submit" />
</form>

Fare attenzione al fatto che l’array di stringhe contiene nome e cognome, i name degli input che voglio rendere anonimo. Alla pressione del tasto submit la funzione javascript ciclerà l’array di stringhe andando a prelevare il valore del campo dal form, e nel caso questo fosse vuoto visualizzerà un messaggio di errore, evidenziando il campo che ci chiede di riempire.

Ovviamente se vogliamo rendere obbligatorio solo uno dei due campi nell’array di stringhe in input alla funzione testiObbligatori dovremo inserirne solo uno.

Controlliamo ciclicamente il funzionamento dei link nei nostri articoli. Se noti dei link che non funzionano segnalacelo tra i commenti. Se hai apprezzato l'articolo considera l'idea di sostenere il blog anche con una piccola donazione. Grazie. Patreon / Ko-fi / Liberapay / Paypal

2 commenti

    1. Ciao Marco, campo è la variabile che viene popolata da document.getElementsByName(campiTesto[i]), che avrà un solo elemento, ovvero quello indicizzato con 0. A ciclare è l’array campiTesto che contiene i nomi di tutti campi obbligatori. Sia chiaro che si tratta solo di un controllo serverside, generalmente si applica il controllo con “required”.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *