¿Cómo borro los errores de validación MVC del lado del cliente cuando se hace clic en un botón de cancelar cuando un usuario ha invalidado un formulario?

Question

Tengo una vista parcial que se representa dentro de una vista principal. La vista parcial aprovecha System.ComponentModel.DataAnnotations y Html.EnableClientValidation().

Se hace clic en un enlace y se muestra div que contiene la vista parcial dentro de un JQuery.Dialog().

Luego hago clic en el botón Guardar sin ingresar ningún texto en mi campo de entrada validado. Esto provoca que la validación del lado del cliente se active como se esperaba y muestre el mensaje "* required" junto al campo no válido.

Cuando se hace clic en el botón cancelar, quiero restablecer la validación MVC del lado del cliente a su estado predeterminado y eliminar cualquier mensaje, listo para cuando el usuario vuelva a abrir el cuadro de diálogo. ¿Hay una manera recomendada de hacer esto?

Answer 1

Esta respuesta es para MVC3. Véanse los comentarios a continuación para obtener ayuda para actualizar a MVC 4 y 5

Si lo que desea es borrar los validación-mensajes para que no se muestran al usuario lo puede hacer con javascript de esta manera:

function resetValidation() { 
     //Removes validation from input-fields 
     $('.input-validation-error').addClass('input-validation-valid'); 
     $('.input-validation-error').removeClass('input-validation-error'); 
     //Removes validation message after input-fields 
     $('.field-validation-error').addClass('field-validation-valid'); 
     $('.field-validation-error').removeClass('field-validation-error'); 
     //Removes validation summary 
     $('.validation-summary-errors').addClass('validation-summary-valid'); 
     $('.validation-summary-errors').removeClass('validation-summary-errors'); 

    } 

Si necesita el reinicio para trabajar solamente en su emergente puede hacerlo de esta manera:

function resetValidation() { 
     //Removes validation from input-fields 
     $('#POPUPID .input-validation-error').addClass('input-validation-valid'); 
     $('#POPUPID .input-validation-error').removeClass('input-validation-error'); 
     //Removes validation message after input-fields 
     $('#POPUPID .field-validation-error').addClass('field-validation-valid'); 
     $('#POPUPID .field-validation-error').removeClass('field-validation-error'); 
     //Removes validation summary 
     $('#POPUPID .validation-summary-errors').addClass('validation-summary-valid'); 
     $('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors'); 

    } 

espero que esto es el efecto que buscas.

Answer 2

Gracias. Tenía una pregunta similar para un escenario ligeramente diferente. Tengo una pantalla donde cuando haces clic en uno de los botones de enviar, descarga un archivo. En MVC cuando devuelve un archivo para su descarga, no cambia de pantalla, por lo que los mensajes de error que ya estaban allí en el resumen de validación permanecen allí para siempre. Ciertamente no quiero que los mensajes de error permanezcan allí después de que el formulario se haya enviado nuevamente. Pero tampoco quiero borrar las validaciones a nivel de campo que se captan en el lado del cliente cuando se hace clic en el botón Enviar. Además, algunos de mis puntos de vista tienen más de una forma en ellos.

Agregué el siguiente código (gracias a usted) en la parte inferior de la página Site.Master, por lo que se aplica a todas mis vistas.

<!-- This script removes just the summary errors when a submit button is pressed 
    for any form whose id begins with 'form' --> 
<script type="text/javascript"> 
    $('[id^=form]').submit(function resetValidation() { 
     //Removes validation summary 
     $('.validation-summary-errors').addClass('validation-summary-valid'); 
     $('.validation-summary-errors').removeClass('validation-summary-errors'); 
    }); 
</script> 

Gracias de nuevo.

Answer 3

Puede acceder a los métodos de la biblioteca de validación para hacerlo. Hay dos objetos de interés: FormContext y FieldContext. Puede acceder al FormContext a través de la propiedad __MVC_FormValidation del formulario y una FieldContext por cada propiedad validada a través de la propiedad FormContextfields.

Así, para borrar los errores de validación, se puede hacer algo como esto a un form:

var fieldContexts = form.__MVC_FormValidation.fields; 
for(i = 0; i < fieldContexts.length; i++) { 
    var fieldContext = fieldContexts[i]; 
    // Clears validation message 
    fieldContext.clearErrors(); 
} 
// Clears validation summary 
form.__MVC_FormValidation.clearErrors(); 

A continuación, se puede conectar ese pedazo de código para que sea caso de que necesite.

Fuentes para esta idea (bastante indocumentado):

• http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf (Menciones FieldContext)
• https://stackoverflow.com/a/3868490/525499 (por señalar this link, que metions cómo activar la validación del lado del cliente a través de JavaScript)

Answer 4

Si está utilizando una validación discreta que viene con MVC, simplemente puede hacer:

$.fn.clearErrors = function() { 
    $(this).each(function() { 
     $(this).find(".field-validation-error").empty(); 
     $(this).trigger('reset.unobtrusiveValidation'); 
    }); 
}; 

--------------------------------------------- ---------------------------

Terceros Editar: Esto sobre todo trabajado en mi caso, pero tenía que eliminar la línea $(this).find(".field-validation-error").empty();. Esto pareció afectar la nueva presentación de los mensajes de validación al volver a enviar.

que utilizó la siguiente:

$.fn.clearErrors = function() { 
     $(this).each(function() { 
      $(this).trigger('reset.unobtrusiveValidation'); 
     }); 
    }; 

y luego se llama así:

$('#MyFormId input').clearErrors(); 

Answer 5

function resetValidation() { 

    $('.field-validation-error').html(""); 

} 

Answer 6

Con el fin de completar clara los artefactos de validación, incluyendo el mensaje, el color de fondo de la campo de entrada, y el contorno de color alrededor del campo de entrada, necesitaba usar el siguiente código, donde este era (en mi caso) un cuadro de diálogo modal de Bootstrap que contenía una forma incrustada.

$(this).each(function() { 
    $(this).find(".field-validation-error").empty(); 
    $(this).find(".input-validation-error").removeClass("input-validation-error"); 
    $(this).find(".state-error").removeClass("state-error"); 
    $(this).find(".state-success").removeClass("state-success"); 
    $(this).trigger('reset.unobtrusiveValidation'); 
}); 

Answer 7

Aquí puede utilizar simplemente eliminar el mensaje de error

$('.field-validation-valid span').html('') 

O

$('.field-validation-valid span').text('')