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.
Perchè fai il test su campo[0] e non su campo[i]?
Devi testare solo il primo campo?
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”.