Salve
ho un problema con la validazione di un form di registrazione contenente 3 campi: cognome, nome e indirizzo mail.
l'istruzione validate è impostata nel seguente modo:
Se premo invio con tutti i campi vuoti compare per ognuno la segnalazione di campo obbligatorio ma di fatto solo il nome (2° campo) risulta veramente controllato e blocca l'invio del form.
Se compilo solo il nome il form viene inviato tranquillamente con cognome e indirizzo mail vuoti.
Sicuramente sbaglio qualcosa ma non riesco a capire cosa.
Grazie in anticipo per eventuali suggerimenti.
P.S. Se può servire utilizzo le seguenti librerie:
ho un problema con la validazione di un form di registrazione contenente 3 campi: cognome, nome e indirizzo mail.
Codice:
<form id="form_iscrizione" action="#" method="post">
<fieldset>
<div data-role="fieldcontain">
<label for="cognome"><div class="testo"> cognome</div></label><br>
<input type="text" name="cognome" id="cognome" />
</div>
<div data-role="fieldcontain">
<label for="nome"><div class="testo"> nome</div></label><br>
<input type="text" name="nome" id="nome" />
</div>
<div data-role="fieldcontain">
<label for="email"><div class="testo"> mail</div></label><br>
<input type="email" name="email" id="email" />
</div>
<div class="rv2-grid-a"><br><br></div>
<div class="rv2-grid-a">
<div class="rv2-block-b">
<input type="submit" name="oper" value="Iscrizione" data-theme="e"/>
</div></div>
</fieldset>
</form>l'istruzione validate è impostata nel seguente modo:
Codice:
<script>
// my method for validate username
$.validator.addMethod("cognome_regex", function(value, element) {
return this.optional(element) || /^([a-zA-Z\xE0\xE8\xE9\xF9\xF2\xEC\x27]\s?)+$/i.test(value);
}, "<br><font color='#FF0000'>Digitare solo lettere</font>");
$.validator.addMethod("nome_regex", function(value, element) {
return this.optional(element) || /^([a-zA-Z\xE0\xE8\xE9\xF9\xF2\xEC\x27]\s?)+$/i.test(value);
}, "<br><font color='#FF0000'>Digitare solo lettere</font>");
$("#form_iscrizione").validate({
rules: {
'cognome': {
required: true, //campo obbligatorio
minlength: 2, //minima lunghezza caratteri
cognome_regex: true,
maxlength: 20
},
'nome': {
required: true, //campo obbligatorio
minlength: 3, //minima lunghezza caratteri
utente_regex: true,
maxlength: 20
},
'email': {
required: true, //campo obbligatorio
minlength: 6, //minima lunghezza caratteri
maxlength: 40, //lunghezza massima
email: true
}
},
messages: {
'cognome': {
required: "<br><font color='#FF0000'>cognome obbligatorio</font>",
minlength: "<br><font color='#FF0000'>cognome 2 caratteri minimo</font>",
maxlength: "<br><font color='#FF0000'>cognome 20 caratteri massimo</font>",
cognome_regex: "<br><font color='#FF0000'>caratteri non validi o troppi spazi</font>"
},
'nome': {
required: "<br><font color='#FF0000'>nome obbligatorio</font>",
minlength: "<br><font color='#FF0000'>nome 3 caratteri minimo</font>",
maxlength: "<br><font color='#FF0000'>nome 20 caratteri massimo</font>",
nome_regex: "<br><font color='#FF0000'>caratteri non validi o troppi spazi</font>"
},
'email': {
required: "<br><font color='#FF0000'>email obbligatoria</font>",
email: "<br><font color='#FF0000'>indirizzo email errato</font>",
minlength: "<br><font color='#FF0000'>email almeno 6 caratteri</font>",
maxlength: "<br><font color='#FF0000'>email massimo 40 caratteri</font>"
}
},
submitHandler: function(form) {
//alert('I dati sono stati inseriti correttamente');
form.submit();
},
invalidHandler: function() {
//alert('I dati inseriti non sono corretti, ricontrollali....');
},
});
</script>Se premo invio con tutti i campi vuoti compare per ognuno la segnalazione di campo obbligatorio ma di fatto solo il nome (2° campo) risulta veramente controllato e blocca l'invio del form.
Se compilo solo il nome il form viene inviato tranquillamente con cognome e indirizzo mail vuoti.
Sicuramente sbaglio qualcosa ma non riesco a capire cosa.
Grazie in anticipo per eventuali suggerimenti.
P.S. Se può servire utilizzo le seguenti librerie:
Codice:
<!-- CSS -->
<link rel="stylesheet" href="lib/jquery.mobile-1.0rc1.min.css" />
<!-- javascript -->
<script type="text/javascript" src="lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
<!-- Mio foglio stile -->
<link rel="stylesheet" href="lib/mio_stile.css" />
