validate - Agregar error a JQuery Resumen de validación discreto sin clave

validation jquery mvc

Question

Tengo un formulario que usa validación JQuery discreta junto con un resumen de validación. Funciona muy bien. Sin embargo, esta forma hace una POST de Ajax que devuelve un resultado JSON. Si el resultado == verdadero, entonces continúo. Sin embargo, si el resultado de JSON devuelve una matriz de mensajes, deseo activar la validación del formulario para actualizar los campos. Los errores se devuelven de la siguiente manera:

{
    "errors": [ 
       { "key" : "NameFirst", "message": "This is the message" },
       { "key" : "NameLast", "message": "This is the message" } 
     ]
}

Analizo el resultado de JSON y llamo a showErrors () como sigue:

for (var j = 0; j < response.errors.length; j++) {
    var key = response.errors[j].key;
    var error = {};
    error[key] = response.errors[j].message;
    $form.data(''validator'').showErrors(error);
}

Esto resalta correctamente los campos, pero no actualiza el resumen de validación. ¿Cómo puedo obtener eso para actualizar?

Además, a veces los errores son genéricos y no se asignan a una propiedad / campo específico en el modelo. En ese caso, se devuelven con claves nulas como:

{
     "errors": [ 
        { "key" : null, "message": "This is the message" },
        { "key" : null, "message": "This is the other message" }, 
        { "key" : "NameFirst", "message": "This is the message" },
        { "key" : "NameLast", "message": "This is the message" } 
      ]
 }

No puedo llamar a showErrors porque no se asignan a un identificador de campo. Una vez que me digan cómo actualizar el resumen, estoy seguro de que puedo agregar elementos a la lista para los mensajes genéricos, pero estoy abierto a otras sugerencias. ¡Gracias!

ACTUALIZAR

Esto es lo que terminé haciendo que parece funcionar bastante bien. Tengo que compilar el resumen de forma manual además de llamar a showErrors en los errores con clave válidos:

var $summary = $form.find("[data-valmsg-summary=true]")
                    .addClass("validation-summary-errors")
                    .removeClass("validation-summary-valid");
var $ul = $summary.find("ul").empty();

var error = {};
$.each(response.errors, function () {
    if (this.key)
        error[this.key] = this.message;
    $("<li />").html(this.message).appendTo($ul);
});
$form.validate().showErrors(error);

Espero que esto ayude a otros.

Answer 1

Me encontré con el mismo problema y no pude encontrar una manera más limpia. Esto es lo que estoy pensando en hacer

en lugar de esto

for (var j = 0; j < response.errors.length; j++) {
    var key = response.errors[j].key;
    var error = {};
    error[key] = response.errors[j].message;
    $form.data(''validator'').showErrors(error);
}

Pon esto,

        var error = {}, keyLess = 0;

        for (var j = 0; j < response.errors.length; j++) {
            var key = response.errors[j].key;
            error[key || keyLess++] = response.errors[j].message;
        }

        $form.validate().showErrors(error);

        var container = $form.find("[data-valmsg-summary=true]"), 
            list = container.find("ul");

        if (list && list.length) {
            list.empty();
            container
              .addClass("validation-summary-errors")
              .removeClass("validation-summary-valid");

            $.each(error, function(k,m) {
                $("<li />").html(m).appendTo(list);
            });
        }

Esto es básicamente lo que hace jQuery.validate.unobtrusive

¿Qué piensas?

Answer 2

Necesitaba agregar mis propios mensajes de error personalizados a la lista de resumen. Después de aproximadamente un día de leer detenidamente el código fuente de validación de jQuery y discreto aquí, esta es la solución que terminé usando.

Primero, declare mi formulario

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formA"}))
{
    @Html.ValidationSummary()
           .....
           .....

Establecer la identificación es importante ya que uso esta identificación en el código de JavaScript para recuperar el objeto de formulario.

Usé el siguiente código para actualizar la lista de errores de resumen al enviar

$(function () {
    var formValidator,
        $form = $("#formA");

    // add handler to the forms submit action
    $form.submit(function () {
        if (!formValidator) {
            formValidator = $form.validate({}); // Get existing jquery validate object
        }

        var errorList = [];

        // get existing summary errors from jQuery validate
        $.each(formValidator.errorList, function (index, errorListItem) {
            errorList.push(errorListItem.message);
        });

        // add our own errors
        if (testForErrorCondidtionA()) {
            errorList.push("Please fix error condition A!");
        }

        if (testForErrorCondidtionB()) {
            errorList.push("Please fix error condition B!");
        }

        // No errors, do nothing
        if (0 === errorList.length) {
            return true; // allow submit
        }

        // find summary div
        var $summary = $form.find("[data-valmsg-summary=true]");

        // find the unordered list
        var $ul = $summary.find("ul");

        // Clear existing errors from DOM by removing all element from the list
        $ul.empty();

        // Add all errors to the list
        $.each(errorList, function (index, message) {
            $("<li />").html(message).appendTo($ul);
        });

        // Add the appropriate class to the summary div
        $summary.removeClass("validation-summary-valid")
            .addClass("validation-summary-errors");

        return false; // Block the submit
    });
});

Este controlador de envío siempre se llama después del controlador discreto, lo que significa que la lista de errores resumidos que recuperamos de jQuery validate siempre estará actualizada.

Espero que esta respuesta ayude, ya que una validación discreta puede ser peliaguda una vez que se aleja del caso estándar.

Answer 3

    if (!formValidator) {
        formValidator = $form.validate({}); // Get existing jquery validate object
    }

    // get existing summary errors from jQuery validate
    $.each(formValidator.errorList, function (index, errorListItem) {
        errorList.push(errorListItem.message);
    });

    // add our own errors
    if (testForErrorCondidtionA()) {
        errorList.push("Please fix error condition A!");
    }

    //unobtrusiveValidation should do the ul/summary dirty work.
    $form.trigger(''invalid-form.validate'', formValidator);

Answer 4

Método de eliminación de errores MVC 5 (ligeramente diferente que el anterior):

function resetValidation() {
    var form = $(''#formName'');
    var summary = form.find(''[data-valmsg-summary=true]'');
    var ul = summary.find(''ul'');
    ul.empty();
    summary.removeClass(''validation-summary-errors'').addClass(''validation-summary-valid'');
}

¡Disfrutar!