|
|||||||
|
|
|
 |
|
|
Strumenti |
07-10-2013, 23:30
|
#1 |
|
Junior Member
Iscritto dal: Jul 2012
Messaggi: 12
|
[JQuery] Login html con validatore JQuery
Ciao,
visto che la vostra gentilezza, volevo chiedervi se riuscite a risolvere anche questo problema (poi non vi rompo +  )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: Codice:
<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>
Codice:
$(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
}
}
});
});
Avvio l'applicazione web da netbeans Grazie |
|
|
|
08-10-2013, 21:01
|
#2 |
|
Senior Member
Iscritto dal: Feb 2002
Messaggi: 1370
|
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. Codice:
<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>
|
|
|
|
|
09-10-2013, 00:48
|
#3 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
L'ho scritto giusto ieri eh
 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. |
|
|
|
|
16-10-2013, 12:41
|
#4 |
|
Junior Member
Iscritto dal: Jul 2012
Messaggi: 12
|
Grazie mille!
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. |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 11:02.
