jQuery validación no intrusiva en .NET MVC 3 - que muestra la marca de verificación de éxito

Question

Usando jQuery validación discreta dentro de un proyecto .NET MVC y que parece estar funcionando bien. Ahora trato de mostrar una marca de verificación verde cuando el campo valida correctamente (del lado del cliente y/o remoto).

Aquí hay una declaración de campo de muestra:

<div class="clearfix"> 
     @Html.LabelFor(model => model.Address1, "Street") 
     <div class="input"> 
      @Html.TextBoxFor(model => model.Address1, new { @class = "xlarge", @maxlength = "100", @placeholder = "e.g. 123 Main St" }) 
      <span class="help-message"> 
       @Html.ValidationMessageFor(model => model.Address1) 
       <span class="isaok">Looks great.</span> 
      </span> 
      <span class="help-block">Enter the street.</span> 
     </div> 
    </div> 

Lo que me gustaría hacer es agregar una clase 'activa' a la "span.isaok" que a su vez tiene una marca de una imagen de fondo.

Intenté usar más destacado/unhighlight:

$.validator.setDefaults({ 
onkeyup: false, 

highlight: function (element, errorClass, validClass) { 
    $(element).addClass(errorClass).removeClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").addClass("error"); 
    $(element).parent().find("span.isaok").removeClass("active"); 
}, 
unhighlight: function (element, errorClass, validClass) { 
    $(element).removeClass(errorClass).addClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").removeClass("error"); 
    if ($(element).val().length > 0) { 
     $(element).parent().find("span.isaok").addClass("active"); 
    } 
} 

});

pero eso muestra una marca de verificación verde para todos los campos, ¡incluso si están vacíos! (por lo tanto, obviamente incorrecto)

Luego intenté usar la opción 'éxito', pero parece que nunca se dispara.

¿Qué me estoy perdiendo?

Editar: así que encontré this blog post y fue capaz de aprovechar la función de éxito, es decir

$(function() { 
    var settings = $.data($('form')[0], 'validator').settings; 
    settings.onkeyup = false; 
    settings.onfocusout = function (element) { $(element).valid(); }; 

    var oldErrorFunction = settings.errorPlacement; 
    var oldSuccessFunction = settings.success; 
    settings.errorPlacement = function (error, inputElement) { 
     inputElement.parent().find("span.isaok").removeClass("active"); 
     oldErrorFunction(error, inputElement); 
    }; 
    settings.success = function (label) { 
     var elementId = '#' + label.attr("for"); 
     $(elementId).parent().find("span.isaok").addClass("active"); 
     oldSuccessFunction(label); 
    }; 
}); 

pero ahora si el formulario no es válido que muestra tanto el mensaje de error y la marca válida .. .

y éste desaparece tan pronto como haga clic en cualquier lugar de la página.

Answer 1

En caso de que cualquiera tiene un problema similar, que finalmente consiguió este trabajo mediante el uso de la versión sin minified de jquery.validate.unobtrusive.js y añadiendo mis js a la onError y métodos onSuccess. El código existente quedó como tal. Use la versión reevaluada durante la implementación.

Gracias.

Answer 2

Esto parece ser un problema con el jquery.validate.unobtrusive que interfiere con la configuración agregada más tarde en $.validator.setDefault. El truco consiste en cargar la secuencia de comandos no intrusiva después de la configuración personalizada. Consulte here y vote para repararlo here.

Answer 3

Esto no es una respuesta directa a su pregunta. Voy a ofrecer un enfoque alternativo a esto: TwitterBootstrapMVC.

Con esta biblioteca todo lo que tendría que escribir para cada entrada es:

@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1) 

Y eso es todo. Tendrás un mensaje de etiqueta, entrada y validación, todo cuidado, sin javascript. Genera la marca html adecuada para usted. Solo necesita asegurarse de tener un CSS estándar adecuado para las clases como .field-validation-error, .field-validation-valid ...