ciao a tutti ho creato un form e ho messo tutti gli id nei vari input, poi ho creato il file validate.js e l ho aggiunto nel head del mio sito con il file jquery. perchè non funziona?
di seguito i file:
html:
<div id="contatti">
<form action="" id="registrazione" method="post">
<ul>
<li>
<label for="nome">Nome:<abbr title="campo obbligatorio">*</abbr></label>
<input name="nome" id="nome" type="text" maxlength="20" required>
</li>
<li>
<label for="cognome">Cognome:<abbr title="campo obbligatorio">*</abbr></label>
<input name="cognome" id="cognome" type="text" maxlength="20" required>
</li>
<li>
<label for="indirizzo">Indirizzo:<abbr title="campo obbligatorio">*</abbr></label>
<input name="indirizzo" id="indirizzo" type="text" maxlength="20" required>
</li>
<li>
<label for="citta">Cittá:<abbr title="campo obbligatorio">*</abbr></label>
<input name="citta" id="citta" type="text" maxlength="20" required>
</li>
<li>
<label for="provincia">Provincia:<abbr title="campo obbligatorio">*</abbr></label>
<input name="provincia" id="provincia" type="text" maxlength="20" required>
</li>
<li>
<label for="cap">CAP:<abbr title="campo obbligatorio">*</abbr></label>
<input name="cap" id="cap" type="text" maxlength="5" required>
</li>
<li>
<label for="tel">Telefono:<abbr title="campo obbligatorio">*</abbr></label>
<input name="tel" id="tel" type="text" maxlength="20" required>
</li>
<li>
<label for="mail">Email:<abbr title="campo obbligatorio">*</abbr></label>
<input name="mail" id="mail" type="text" maxlength="20" required>
</li>
<li>
<label for="data_arrivo">check-in:<abbr title="campo obbligatorio">*</abbr></label>
<input name="data_arrivo" class="datepicker" class="ui-no-gradient-content ui-no-gradient-header" type="date" required>
</li>
<li>
<label for="data_partenza">check-out:<abbr title="campo obbligatorio">*</abbr></label>
<input name="data_partenza" class="datepicker" class="ui-no-gradient-content ui-no-gradient-header" type="date" required>
</li>
<li>
<label for="adulti">Adulti:<abbr title="campo obbligatorio">*</abbr></label>
<select name="adulti" id="adulti" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</li>
<li>
<label for="bambini">Bambini:<abbr title="campo obbligatorio">*</abbr></label>
<select name="bambini" id="bambini">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</li>
<li>
<label for="richieste">Richiesta:</label>
<textarea name="richieste" cols="33" rows="10" id="richieste" ></textarea>
</li>
<li id="invia">
<input name="invia" type="submit" type="reset" value="invia">
</li>
</form>
</div>
validate.js:
// JavaScript Document
$('#contatti #registrazione').validate({
rules:{
nome: {
required:true,
minlegnth:2,
maxlenght:20
},
cognome:{
required:true,
minlegnth:2,
maxlenght:20
},
indirizzo:{
required:true,
minlegnth:2,
maxlenght:20
},
citta:{
required:true,
minlegnth:4,
maxlenght:20
},
provincia:{
required:true,
minlegnth:2,
maxlenght:20
},
cap:{
required:true,
maxlenght:5,
minlenght:5
},
tel:{
required:true,
minlegnth:5,
maxlenght:10,
number:true,
},
mail:{
required:true,
email:true,
},
data_arrivo:{
required:true,
date:true
},
data_partenza:{
required:true,
date:true
},
adulti:{
required:true,
number:true
},
bambini:{
required:true,
number:true
},
},
message:{
nome:{
required: "obbligatorio",
},
cognome:{
required:"obbligatorio",
},
indirizzo:{
required:"obbligatorio",
},
citta:{
required:"obbligatorio",
},
provincia:{
required:"obbligatorio",
},
cap:{
required:"obbligatorio",
},
tel:{
required:"obbligatorio",
},
mail:{
required:"obbligatorio",
},
data_arrivo:{
required:"obbligatorio",
},
data_partenza:{
required:"obbligatorio",
},
adulti:{
required:"obbligatorio",
},
bambini:{
required:"obbligatorio",
},
},
highlight: function(element, errorClass){
$(element).parent("li").addClass(errorClass);
},
//e quando l'errore viene risolto
unhighlight: function(element, errorClass){
$(element).parent("li").removeClass(errorClass);
},
submitHandler: function() { alert("Form inviato!!") }
});//validate
validator.resetForm();