PDA

View Full Version : [java script] Validare form

83mirk
21-09-2007, 13:51
Salve ragazzi, vorrei esporre il mio quesito.
Sto realizzando il form per un sito e vorrei effettuare la validazione dei campi di tipo text, radio button, menù di opzioni select.
Potreste darmi una mano?

Fino ad ora sn riuscito a validare il campo testo (quello del nome):

//FORM:

<body><table align="center" border="1">
<form method="post" name="modulo">
<tr>
<td colspan="2" align="center"><b>Registrazione al servizio<br>Tutti i campi sono obbligatori</b></td>
</tr>
<tr>
<td><b>Nome</b></td>
<td><input type="text" name="nome"></td>
</tr>
<tr>
<td><b>Sesso</b></td>
<td>
<input type="radio" name="sesso" value="M" checked>M
<input type="radio" name="sesso" value="F">F
</td>
</tr>
<tr>
<td><b>Città</b></td>
<td>
<select name="citta">
<option>- Seleziona la tua città -</option>
<option value="Roma">Roma</option>
<option value="Milano">Milano</option>
<option value="Napoli">Napoli</option>
<option value="Firenze">Firenze</option>
<option value="Bologna">Bologna</option>
<option value="Catania">Catania</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Invia" onClick="Modulo()">
</td>
</tr>
</form>
</table>

FUNZIONE

<script language="javascript">
<!--
function Modulo() {
// Variabili associate ai campi del modulo
var nome = document.modulo.nome.value;

//Effettua il controllo sul campo NOME
if ((nome == "") || (nome == "undefined")) {
alert("Il campo Nome è obbligatorio.");
document.modulo.nome.focus();
return false;
}
//INVIA IL MODULO
else {
document.modulo.action = "php_form.php";
document.modulo.submit();
}
}
//-->
</script>

</body>
</html>

Siccome non sono molto pratico e sto trovando delle difficoltà, potreste dirmi come risolvere il problema per i radio button ed il menù di opzioni???

Ringrazio in anticipo chi avrà la pazienza di rispondermi.
andbin
21-09-2007, 14:17
Siccome non sono molto pratico e sto trovando delle difficoltà, potreste dirmi come risolvere il problema per i radio button ed il menù di opzioni???Innanzitutto è meglio se usi l'evento onsubmit nel tag <form>. Questo evento viene generato quando si sta per inviare il form. Se dall'evento fai ritornare true, allora procede con l'invio, altrimenti se fai ritornare false non fa nulla. Ed è quindi adatto per fare la validazione.

Per quanto riguarda <select> e i radio è anche abbastanza semplice. Un <select> ha anche lui la proprietà 'value' ma anche la proprietà 'options' (un array delle opzioni) e la proprietà 'selectedIndex' (l'indice della option selezionata). Per i radio hai una proprietà 'checked' che dice se è marcata o no.

Per dirla con del codice, nel tuo caso puoi testare:

document.modulo.citta.value
oppure
document.modulo.citta.selectedIndex

e

document.modulo.sesso[0].checked
document.modulo.sesso[1].checked
83mirk
21-09-2007, 15:30
Grazie per la celere risposta. Potresti dirmi di preciso dove inserire le stringhe??
andbin
21-09-2007, 15:48
Grazie per la celere risposta. Potresti dirmi di preciso dove inserire le stringhe??Potresti fare:

<form method="post" name="modulo" action="php_form.php" onsubmit="return valida_form()">

(e nota, metti pure l'action, non è granché impostarlo da javascript)

poi il pulsante di invio diventa:

<input type="submit" value="Invia">

(tu avevi fatto un "normale" button)

e il codice Javascript si potrebbe fare:

function valida_form ()
{
if (document.modulo.nome.value == "")
{
alert ("Il campo Nome è obbligatorio.");
document.modulo.nome.focus ();
}
else if (!document.modulo.sesso[0].checked &&
!document.modulo.sesso[1].checked)
{
alert ("Il campo Sesso è obbligatorio.");
document.modulo.sesso[0].focus ();
}
else if (document.modulo.citta.selectedIndex == 0)
{
alert ("Il campo Città è obbligatorio.");
document.modulo.citta.focus ();
}
else
return true;

return false;
}
83mirk
21-09-2007, 20:44
Ottimo, grazie per la pazienza.
Funziona tutto alla perfezione :D