PDA

View Full Version : [JQuery] Login html con validatore JQuery

forza_sugar
07-10-2013, 23:30
Ciao,
visto che la vostra gentilezza, volevo chiedervi se riuscite a risolvere anche questo problema (poi non vi rompo + :sofico: )
Ho una pagina HTML per la registrazione ad un sito. Questa pagina html richiama una pagina JSP che va a registrare l'utente sul db.
Volevo aggiungere un validatore JQuery che controllasse che l'utente compili tutti i campi. Il mio problema è che tale validatore non viene eseguito e quindi viene subito richiamata la pagina jsp.
La libreria JQuery è correttamente inserita.
Questo è la pagina HTML:

<html>
<head>

<title>Registrazione</title>

</head>
<body bgcolor="yellow">
<h2>Benvenuto a </h2>
<br>
<h3>Registrazione al sito</h3><br>
<b> n.b. Tutti i campi sono obbligatori.</b>
<form action="registra.jsp" method="post" id="registrazione">
<table align="left" border="1">
<tr>
<td><b>Nome</b></td>
<td> <input type="text" name="nome" id="nome"> </td>
</tr>
<tr>
<td><b>Cognome</b></td>
<td> <input type="text" name="cognome" id="cognome"> </td>
</tr>
<tr>
<td><b>Username</b></td>
<td> <input type="text" name="username" id="username"> </td>
</tr>
<tr>
<td><b>Password</b></td>
<td> <input type="password" name="password" id="password"> </td>
</tr>
<tr>
<td><b>Conferma Password</b></td>
<td> <input type="password" name="conferma" id="conferma"> </td>
</tr>
<tr>
<td><b>Hobby</b></td>
<td> <input type="text" name="hobby" id="hobby"> </td>
</tr>
<tr>
<td><b>Data Di Nascita (gg/mm/aaaa) </b></td>
<td> <input type="text" name="nascita" id="nascita"> </td>
</tr>
<tr>
<td><b>E-Mail</b></td>
<td> <input type="text" name="email" id="email"> </td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="submit" value="Registrami" name="invio"/>

</td>
</tr>
</table>

</form>
</body>
</html>

e questo è il validatore JQuery:

$(document).ready(function()
{
$("#registrazione").validate(
{
rules:{
'nome':{
required:true,
minlength: 3
},
'cognome': {
required:true,
minlength:2
},
'username':{
required:true,
minlength: 3
},
'password':{
required:true,
minlength: 8
},
'conferma':{
equalTo: 'password'
},
'hobby':{
required:true,
minlength: 3
},
'email':{
required:true,
email:true
},
'nascita':{
required:true,
minlength: 10
}
}
});
});

Ho seguito una guida che aiutava a fare il validatore ma non funziona. Riuscite ad aiutarmi?
Avvio l'applicazione web da netbeans
Grazie
Player1
08-10-2013, 21:01
Mmmmh..
Ricordati che devi importare anche le librerie JQuery e JQuery.Validate nell'header.
Lo stesso vale per il tuo codice di validazione javascript che dal tuo esempio mi sembra in un file a parte.


<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<title>Registrazione</title>

</head>
<body bgcolor="yellow">
<h2>Benvenuto a </h2>
<br>
<h3>Registrazione al sito</h3><br>
<b> n.b. Tutti i campi sono obbligatori.</b>
<form action="registra.jsp" method="post" id="registrazione">
<table align="left" border="1">
<tr>
<td><b>Nome</b></td>
<td> <input type="text" name="nome" id="nome"> </td>
</tr>
<tr>
<td><b>Cognome</b></td>
<td> <input type="text" name="cognome" id="cognome"> </td>
</tr>
<tr>
<td><b>Username</b></td>
<td> <input type="text" name="username" id="username"> </td>
</tr>
<tr>
<td><b>Password</b></td>
<td> <input type="password" name="password" id="password"> </td>
</tr>
<tr>
<td><b>Conferma Password</b></td>
<td> <input type="password" name="conferma" id="conferma"> </td>
</tr>
<tr>
<td><b>Hobby</b></td>
<td> <input type="text" name="hobby" id="hobby"> </td>
</tr>
<tr>
<td><b>Data Di Nascita (gg/mm/aaaa) </b></td>
<td> <input type="text" name="nascita" id="nascita"> </td>
</tr>
<tr>
<td><b>E-Mail</b></td>
<td> <input type="text" name="email" id="email"> </td>
</tr>

<tr>
<td colspan="2" align="center">
<input type="submit" value="Registrami" name="invio"/>

</td>
</tr>
</table>

</form>

<script type="text/javascript">
$(document).ready(function()
{
$("#registrazione").validate(
{
rules:{
'nome':{
required:true,
minlength: 3
},
'cognome': {
required:true,
minlength:2
},
'username':{
required:true,
minlength: 3
},
'password':{
required:true,
minlength: 8
},
'conferma':{
equalTo: 'password'
},
'hobby':{
required:true,
minlength: 3
},
'email':{
required:true,
email:true
},
'nascita':{
required:true,
minlength: 10
}
}
});
});
</script>
</body>
</html>
OoZic
09-10-2013, 00:48
L'ho scritto giusto ieri eh :D
1 Caricate jQuery e plugin vari alla fine del documento prima della chiusura del body!

Sono risorse caricate in modo sincrono, quindi il caricamento della pagina è bloccato fin che non finiscono di essere scaricate.

E poi dato che jQuery = 90% delle volte si tratta di fare operazioni sul DOM, non c'è nessuna controindicazione nel metterlo alla fine.

2 motivo per cui non serve $(document).ready(function(){ ... }); il documento è già interamente caricato quando si carica jQuery, alla fine del documento appunto.
forza_sugar
16-10-2013, 12:41
funziona!
Un'ultima cosa...come devo modificare il validatore JQuery per fare in modo che sia obbligatorio un campo fra due?
Esempio: se inserisci il nome, non è obbligatorio il cognome o viceversa.