- a validação não está funcionando nos últimos 3 campos.
- No safari (versão 5.1.7), o plug-in não está funcionando para todos os campos.
- por que apenas o campo móvel está funcionando?
Código HTML
<form method="post" name="reservation-form" id="reservation-form" action="php/mail.php">
<label>NAME</label><input type="text" name="fullname" id="fullname" placeholder="Make a resevation in the name of..."/>
<label>EMAIL</label>
<input type="text" name="emailid" id="emailid" placeholder="Email address.."/>
<label style="margin-left: 40px;">MOBILE</label>
<input type="text" name="mobno" id="mobno" placeholder="Mobile number..."/>
<label>TABLE FOR</label>
<input type="text" name="tableno" id="tableno" placeholder="3"/>
<label style="margin-left: 16px;">DATE</label>
<input type="text" name="date" id="date" placeholder="3/01/2015"/>
<label style="margin-left: 35px;">TIME</label>
<input type="text" name="time" id="time" placeholder="05:10PM" required/>
<input type="submit" name="submit" id="submit" value="RESERVE TABLE"/>
</form>
Código Jquery
function validate(element) {
$("#reservation-form").validate({
rules: {
fullname: "required",
emailid: {
required: true,
email: true
},
mobno: {
required: true,
minlength: 10,
maxlength: 10,
phoneUS: true
},
tableno: {
required: true,
digits: true
},
date: {
required: true
},
time: {
required: true
}
},
messages: {
fullname: "Please enter your fullname",
emailid: "Please enter a valid email address",
mobno: "Please enter a mobno",
tableno: "3",
date: "3/01/2015",
time: "05:10PM"
},
errorPlacement: function(error, element) {
console.log(element);
element.attr("placeholder",error.text());
},
// highlight: function(element, errClass, validClass) {
//
// $(element).addClass(errClass).removeClass("validClass");
// $(element.form).$(find("#" + element.id)).closest("div").addClass("errClass");
// },
// unhighlight: function(element, errClass, validClass) {
// $(element).removeClass(errClass).addClass("validClass");
// $(element.form).$(find("#" + element.id)).closest("div").removeClass("errClass");
// },
submitHandler: function(form) {
form.submit();
}
});// your validation stuff goes here
}
$(":input").bind("keyup change", function(event) {// validate signup form on keyup and submit
if (event.keyCode === 9) {
validate(this);
}
});
$("#submit").click(function() {
validate(this);
});
Respostas:
2 para resposta № 1- Livre-se do seu
validate
função.$.validate
deve ser chamado no documento pronto por si só, não no envio do formulário. - na tua
submitHandler
função, você não precisa enviar o formulário, isso acontecerá desde que você nãoreturn false
- Sua ideia de colocar texto de erro no espaço reservadoé bom ... até que eles digam algo errado, agora seu espaço reservado não será exibido e eles não receberão nenhum feedback informando que inseriram as informações incorretas.
- Você deve incluir o arquivo additional-methods.js se quiser que o phoneUS funcione.
A maneira correta de validar um elemento é v.element (), então seu código de keyup deve ser este (eu discordo de fazer isso, a propósito):
$(":input").bind("keyup change", function(event) {// validate signup form on keyup and submit if (event.keyCode === 9) { v.element(this);//where v comes from the call to $.validate, i.e. var v = $.validate({...}); } });
Limpei alguns desses problemas e atualizei seu código aqui: http://jsfiddle.net/mz7humqt/2/