/ / jquery validation não está funcionando com o plugin validate - jquery, safari, jquery-validate

A validação do jquery não está funcionando com o plugin de validação - jquery, safari, jquery-validate

  1. a validação não está funcionando nos últimos 3 campos.
  2. No safari (versão 5.1.7), o plug-in não está funcionando para todos os campos.
  3. 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);
});

JSFIDDLE

Respostas:

2 para resposta № 1
  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.
  2. na tua submitHandler função, você não precisa enviar o formulário, isso acontecerá desde que você não return false
  3. 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.
  4. Você deve incluir o arquivo additional-methods.js se quiser que o phoneUS funcione.
  5. 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/