jQuery convalida discreto in .NET MVC 3 - che mostra successo segno di spunta

Question

utilizzando jQuery convalida discreto all'interno di un progetto NET MVC e che sembra funzionare bene. Ora sto cercando di mostrare un segno di spunta verde quando il campo si convalida correttamente (lato client e/o remoto).

Ecco una dichiarazione di campo di esempio:

<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> 

Quello che mi piacerebbe fare è aggiungere una classe 'attiva' per il "span.isaok" che a sua volta ha un segno di spunta per un'immagine di sfondo.

Ho provato usando luce/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"); 
    } 
} 

});

ma che mostra un segno di spunta verde per tutti i campi, anche se sono vuote! (Da cui ovviamente sbagliato)

poi ho provato ad utilizzare l'opzione 'successo', ma che non sembra mai essere licenziato.

Cosa mi manca?

Edit: Così ho trovato this blog post ed è stato in grado di sfruttare la funzione di successo cioè

$(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); 
    }; 
}); 

ma ora se la forma non è valido lo dimostra sia il messaggio di errore e il marchio valido .. .

e quest'ultimo scompare non appena clicco qualsiasi punto della pagina.

Answer 1

Nel caso in cui uno ha un problema simile, ho finalmente ottenuto questo lavoro utilizzando la versione non-minified di jquery.validate.unobtrusive.js e aggiungendo le mie js al onError e metodi onSuccess. Il codice esistente è stato lasciato così. Utilizzare la versione re-minified durante la distribuzione.

Grazie.

Answer 2

Questo sembra essere un problema con il jquery.validate.unobtrusive interferire con le impostazioni aggiunte in seguito in $.validator.setDefault. Il trucco è quello di caricare lo script discreto dopo le impostazioni personalizzate. Vedi here e vota per risolverlo here.

Answer 3

Questa non è una risposta diretta alla sua domanda. Ho intenzione di offrire un approccio alternativo a questo: TwitterBootstrapMVC.

Con questa libreria tutto quello che avrei dovuto scrivere per ogni ingresso è:

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

E questo è tutto. Avrai un'etichetta, un input e un messaggio di convalida, tutti curati, senza javascript. Genera un markup html adeguato per te. Devi solo assicurarti di avere un css standard corretto per classi come .field-validation-error, .field-validation-valid ...