validar - jquery validate rules

jQuery validation onblur

Question

Estoy tratando de hacer que la validación jQuery funcione en una página web que estoy creando. Tengo alrededor de 6 campos diferentes que contienen los detalles de la página. Estoy usando esto mientras me oculto y mostrándoles que ofrecen una mejor experiencia de usuario.

Tengo el complemento funcionando como deseo siempre que intento enviar la página y cada vez que agrego un solo carácter (cuando un cuadro de texto requiere 2 o más caracteres), sin embargo, también quiero que la validación ocurra en blur. Quiero informar a mis usuarios de inmediato si no han cumplido con la condición de validación para que puedan solucionarlo de inmediato y no tengan que regresar.

¿Alguien me puede decir qué debo hacer? Estoy usando el * http://bassistance.de/jquery-plugins/jquery-plugin-validation/ plugin.

Este es el código jQuery que he escrito hasta ahora:

 $("#aspnetForm").validate({
rules: {
<%=txtFirstName.UniqueID %>:
{
required: true,
minlength: 2
}
,
<%=txtSurname.UniqueID %>:
{
required: true,
minlength: 2
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: true,
minlength: 8
}
,
<%=Email.UniqueID %>:
{
required: true,
email: true
}
,
<%=ddDay.UniqueID %>:
{
required: true
}
,
<%=ddMonth.UniqueID %>:
{
required: true
}
,
<%=ddYear.UniqueID %>:
{
required: true
}
,
<%=txtHouseNumber.UniqueID %>:
{
required: true,
minlength:1
}
,
<%=txtAddress1.UniqueID %>:
{
required: true,
minlength:5
}
,
<%=txtCity.UniqueID %>:
{
required: true,
minlength:2
}
,
<%=txtSuburb.UniqueID %>:
{
required: true,
minlength:2
}
,
<%=txtPostCode.UniqueID %>:
{
required: true,
minlength:4,
maxlength:4
}
,
<%=UserName.UniqueID %>:
{
required: true,
minlength:4
}
,
<%=Password.UniqueID %>:
{
required: true,
minlength:4
}
,
<%=ConfirmPassword.UniqueID %>:
{
equalTo: "ctl00$ctl00$cpMain$cpLeft$Password"
}
,
<%=chkTerms.UniqueID %>:
{
required: true
}
},
messages: {
<%=txtFirstName.UniqueID %>:
{
required: "Please enter your firstname",
minlength: "Minimum length is 2 characters"
},
<%=txtSurname.UniqueID %>:
{
required: "Please enter your lastname",
minlength: "Minimum length is 2 characters"
},
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your mobile",
minlength: "Minimum length is 8 characters"
}
,
<%=ddDay.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=txtMobileNumber.UniqueID %>:
{
required: "Please enter your date of birth"
}
,
<%=Email.UniqueID %>:
"Please enter a valid email"
,
<%=txtHouseNumber.UniqueID %>:
{
required: "Please enter your house number",
minlength:"Please add at least 1 character"
}
,
<%=txtAddress1.UniqueID %>:
{
required: "Please enter your address",
minlength:"Please add at least 5 characters"
}
,
<%=txtCity.UniqueID %>:
{
required: "Please enter your city",
minlength:"Please add at least 2 characters"
}
,
<%=txtSuburb.UniqueID %>:
{
required: "Please enter your city",
minlength:"Please add at least 2 characters"
}
,
<%=txtPostCode.UniqueID %>:
{
required: "Please enter your postcode",
minlength:"Please add the 4 required characters",
maxlength:"Only 4 characters are allowed"
}
,
<%=UserName.UniqueID %>:
{
required: "Please enter your username",
minlength: "Please add the 4 required characters"
}
,
<%=Password.UniqueID %>:
{
required: "Please enter your password",
minlength: "Please add the 4 required characters"
}
,
<%=ConfirmPassword.UniqueID %>:
{
equalTo: "Passwords must match"
}
,
<%=chkTerms.UniqueID %>:
{
required: "Please agree to the terms"
}
}
});

¿Algun consejo?

Answer 1

El código Thia no activará la validación en el teclado, pero en el desenfoque "foco perdido", la validación se activará, y una vez que el usuario comience a editar el campo, el mensaje de validación desaparecerá. Encuentra otras personalizaciones más interesantes en esta referencia: https://jqueryvalidation.org/category/plugin/

$(''#frm'').validate({
onkeyup: false,
focusCleanup: true
});

Answer 2

Diver Dan tenia razon

$(''form'').validate({
onfocusout: function (element) {
$(element).valid();
},
rules: {
name: ''required'',
from: ''required''
},
messages: {
name: ''Please enter your firstname'',
from: ''Please enter where are you from''
}
});

Answer 3

No puedo ver nada en el doco que pueda hacer eso. La única otra forma en que puedo pensar en hacerlo es.

$(''#field1, #field2, #field3'').blur(function(){
validator.validate()
});

Answer 4

Solo ponlo en onkeyup = falso

$(''form'').validate({
rules: {
name: ''required'',
from: ''required''
},
onkeyup: false
,
messages: {
name: ''Please enter your firstname'',
from: ''Please enter where are you from''
}
});

Answer 5

También puedes usar el elemento call del validador.

 $(''form'').validate({
onfocusout: function(element) {
this.element(element);
},
rules: {
name: ''required'',
from: ''required''
},
messages: {
name: ''Please enter your firstname'',
from: ''Please enter where are you from''
}
});

Answer 6

tratar:

onkeyup: function (element, event) {
$(element).valid();
// your code
}