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

razor validation

Question

La validación por defecto en MVC 3 se basa en jQuery Validation , que generalmente puedo 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 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 , $.validator.setDefaults al validador de formulario usando $("#form_selector").data(''validator'') y luego $("#form_selector").data(''validator'') la configuración.

$(function () {

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

});

Mira si te funciona.

Answer 2

La forma correcta de hacer esto:

Orden de script:

1. El complemento de validación
2. El complemento discreto
3. Su código personalizado y opciones

Script personalizado y script de opciones:

var settings = {
   //...
}; 

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

Answer 3

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

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

Cuando se produce un error de validación, "ValidationMessageFor" agrega una clase "field-validation-error" como se muestra 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 dupliqué mi estilo como

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

Pensé que esta era la manera más simple de arreglar esto.

Answer 4

Tuve el mismo problema, pero me di cuenta de que el plugin Discreto realmente estaba solucionando el problema, ¡anulará todas las opciones que establezca! El truco es tener su código escrito / incluido en el siguiente orden:

1. El complemento de validación
2. Su código personalizado y opciones
3. El complemento discreto

¡Cualquier otra orden y esto no se configurará correctamente!