¿Cómo puedo personalizar la validación discreta en ASP.NET MVC 3 para que coincida con mi estilo?

Question

La validación predeterminada en MVC 3 se basa en jQuery Validation, que por lo general puede personalizar con algo como:

$.validator.setDefaults({ 
    submitHandler: function() { alert('submitHandler'); }, 
    errorPlacement: function(error, element) { 
    // do something important here 
    alert('errorPlacement'); 
    }, 
    errorClass: "error", 
    errorElement: "input", 
    onkeyup: false, 
    onclick: false 
}) 

Pero, eso no parece funcionar en MVC 3. Específicamente, errorPlacement no parece cada vez ser llamado y no tengo idea de por qué. Voy a obtener el submitHandler llamado, pero nunca errorPlacement.

¿Cómo puedo personalizar la validación para que coincida con la estructura/estilo que requiera para el estilo de mi sitio? El valor predeterminado es excelente, pero no siempre funciona en todas las situaciones.

Answer 1

En mi código en lugar de usar $.validator.setDefaults Accedo al validador de formulario usando $("#form_selector").data('validator') y luego cambio la configuración.

$(function() { 

    var validator = $("#form_selector").data('validator'); 
    validator.settings.errorPlacement = function(error,element) { 
     alert('errorPlacement'); 
    }; 

}); 

Vea si le funciona.

Answer 2

Tuve el mismo problema, pero me di cuenta de que el plugin Discreto era realmente sacando el problema, ¡anulará cualquier opción que establezca! El truco es que su código escrito/incluidos en el orden siguiente:

1. la validación complemento
2. el código personalizado & opciones
3. El plugin discreta

Cualquier otro orden y esta no se configurará correctamente!

Answer 3

Todo lo que hice para esto solo duplico mi estilo para que coincida con los elementos que agrega el validador discreto.

@Html.ValidationMessageFor(x => x.EmailAddress, "", new { @class = "field-error" }) 

Cuando se produce un error de validación "ValidationMessageFor" agrega una clase de "campo de validación de errores", como a continuación.

<span class="field-error field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true"><span for="EmailAddress" generated="true" class="">Email address is Required.</span></span> 

Así que duplicar mi estilo como

.field-error.***field-validation-error*** {position:relative;color:#fff;background:#589BC9;} 

pensé que esta es la forma más sencilla de solucionar este problema.

Answer 4

manera correcta de hacer esto:

fin

Guión:

1. el plugin de validación
2. El plugin discreta
3. el código personalizado & opciones

Cus Tom código & opciones de script:

var settings = { 
    //... 
}; 

// override jQuery unobtrusive validator settings 
$.validator.unobtrusive.options = settings;