errorClass en jquery validate plugin?

Question

Estoy usando el complemento jquery validate en mi aplicación web para validar formularios para validaciones en blanco y otras simples.

estoy usando a continuación el código de configuración jQuery plugin de validación de mi forma, no es una opción erroClass en ella, donde he definido un nombre de clase CSS authError el que quiero aplicar en los mensajes de error, pero su aplicación de la misma clase a la casilla ENTRAR también, no quiero aplicarlo en el cuadro ENTRADA, solo lo quiero para el mensaje de error. Por favor revise y ayude. ¡Gracias!

$("#frmSignin").validate({ 
    debug: false, 
    errorClass: "authError", 
    errorElement: "span", 
    rules: { 
     username: { 
      required: true, 
      minlength: 10 
     }, 
     password: { 
      required: true 
     } 
    }, 
    messages: { 
     username: { 
      required: "Please enter your username" 
     }, 
     password: { 
      required: "Please enter your password" 
     } 
    } 
}); 

Answer 1

Gracias, para los chicos trucos, pero en su lugar encontró una mejor manera mediante el uso del código de jQuery solamente. Hay un evento highlight en el complemento validar que se invoca cuando se produjo un error para resaltar los campos de error. Acabo de eliminar el elemento de formulario de clase cuando se convoca este evento.

$("#frmSignin").validate({ 
    debug: false, 
    errorClass: "authError", 
    errorElement: "span", 
    rules: { 
     username: { 
      required: true, 
      minlength: 10 
     }, 
     password: { 
      required: true 
     } 
    }, 
    messages: { 
     username: { 
      required: "Please enter your username" 
     }, 
     password: { 
      required: "Please enter your password" 
     } 
    }, 
    highlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); 
    } 
}); 

Answer 2

Si desea dar css para el mensaje de error. Luego, en lugar de utilizar errorClass definir regla CSS

label.error 

Answer 3

En el plugin de validación de jQuery, el errorClass se aplican tanto al elemento de mensaje de error (por lo general un <label>, sino una <span> en su caso) y a la elemento validado en sí. Dado que sólo desea estilizar el elemento de mensaje de error, debe escribir:

span.authError { 
    // Your error element style. 
} 

Answer 4

realidad debe ser sólo definiendo diferentes clases para la entrada y la duración (lapso desde errorElement está configurado para abarcar, de lo contrario será etiqueta), en lugar de eliminar la clase aplicado

por ejemplo

span.authError {color: red;}

input.authError {border: 1px roja punteada;}

y no sólo .authError {} que obtener aplicado a la entrada y la duración

Answer 5

$("#borrowerForm").validate({ 
     errorElement: 'span', 
     errorElementClass: 'input-validation-error', 
     errorClass: 'field-validation-error', 
     errorPlacement: function(error, element) {}, 
     highlight: function(element, errorClass, validClass) { 
      $(element).addClass(this.settings.errorElementClass).removeClass(errorClass); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      $(element).removeClass(this.settings.errorElementClass).removeClass(errorClass); 
     }, 
     onkeyup: false, 
     errorPlacement: function (error, element) { error.insertAfter(element); } 
    }); 

Answer 6

Comprobar esto:

jQuery.validator.messages.required = ""; 
$('#frm-contact').validate({ 
    invalidHandler: function (e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 
        ? 'You missed 1 field. It has been highlighted below' 
        : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    onkeyup: false, 
    submitHandler: function() { 
     $("div.error").hide(); 
     alert("submit! use link below to go to the other step"); 
    }, 
    highlight: function (element, required) { 
     $(element).fadeOut(function() { 
      $(element).fadeIn(); 
      $(element).css('border', '2px solid #FDADAF'); 
     }); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).css('border', '1px solid #CCC'); 
    } 
});