[java script] Validare form

83mirk · 21-09-2007, 12: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">

</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, 13:17

Quote:

Originariamente inviato da 83mirk

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, 14:30

Grazie per la celere risposta. Potresti dirmi di preciso dove inserire le stringhe??

andbin · 21-09-2007, 14:48

Quote:

Originariamente inviato da 83mirk

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:

Codice:

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, 19:44

Ottimo, grazie per la pazienza.
Funziona tutto alla perfezione

21-09-2007, 12:51	#1
83mirk Member Iscritto dal: Mar 2007 Messaggi: 75	[java script] Validare form 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. __________________ F3JP-AP098E - T5600 1.8 GHz, RAM 2GB, 320GB SATA 7200 rpm, ATI X1700, S-Multi DL, LCD 15,4 WXGA Glare, WLAN, BTH, Webcam 1.3MP, W7 - Non più ormai ...

21-09-2007, 14:30	#3
83mirk Member Iscritto dal: Mar 2007 Messaggi: 75	Grazie per la celere risposta. Potresti dirmi di preciso dove inserire le stringhe?? __________________ F3JP-AP098E - T5600 1.8 GHz, RAM 2GB, 320GB SATA 7200 rpm, ATI X1700, S-Multi DL, LCD 15,4 WXGA Glare, WLAN, BTH, Webcam 1.3MP, W7 - Non più ormai ...

21-09-2007, 19:44	#5
83mirk Member Iscritto dal: Mar 2007 Messaggi: 75	Ottimo, grazie per la pazienza. Funziona tutto alla perfezione __________________ F3JP-AP098E - T5600 1.8 GHz, RAM 2GB, 320GB SATA 7200 rpm, ATI X1700, S-Multi DL, LCD 15,4 WXGA Glare, WLAN, BTH, Webcam 1.3MP, W7 - Non più ormai ...

Strumenti
Mostra una versione stampabile Invia questa pagina per email