asp.net - data - ¿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?

mvc required field validation

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 div que contiene la vista parcial se muestra dentro de un JQuery.Dialog() .

A continuación, 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 diálogo. ¿Hay una manera recomendada de hacer esto?

Answer 1

Aquí puede usar simplemente eliminar el mensaje de error

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

O

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

Answer 2

Esta respuesta es para MVC3. Consulte los comentarios a continuación para obtener ayuda para actualizarlo a MVC 4 y 5

Si solo desea borrar los mensajes de validación para que no se muestren al usuario, puede hacerlo con javascript de la siguiente 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 que el restablecimiento solo funcione en su ventana emergente, puede hacerlo así:

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 este sea el efecto que buscas.

Answer 3

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 ti) en la parte inferior de la página Site.Master para que se aplique 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 4

Para completar borrar los artefactos de validación incluyendo el mensaje, el fondo coloreado del campo de entrada y el contorno coloreado alrededor del campo de entrada, necesitaba usar el siguiente código, donde este era (en mi caso) un diálogo modal 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 5

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

Por lo tanto, para borrar los errores de validación, puede hacer algo como esto en 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();

Entonces, puede enganchar esa pieza de código a cualquier evento que necesite.

Fuentes para esta información (bastante indocumentada):

• http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf (Menciones FieldContext)
• https://.com/a/3868490/525499 (para señalar este enlace , que explica cómo activar la validación del lado del cliente a través de javascript)

Answer 6

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'');
    });
};

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

Edición de terceros : Esto funcionó principalmente en mi caso, pero tuve que eliminar $(this).find(".field-validation-error").empty(); línea. Esto pareció afectar la nueva presentación de los mensajes de validación al volver a enviar.

Usé lo siguiente:

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

y luego lo llamé así:

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

Answer 7

Simplemente puede definir una nueva función en jQuery:

$.fn.resetValidation = function () {
    $(this).each(function (i, e) {
        $(e).trigger(''reset.unobtrusiveValidation'');
        if ($(e).next().is(''span'')) {
            $(e).next().empty();
        }
    });
};

y luego úsala para tus campos de entrada:

$(''#formId input'').resetValidation();

Answer 8

function resetValidation() {

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

}