css - mensajes - MVC Twitter Bootstrap manejo de errores discreto

notifications bootstrap

Question

He estado tratando de conseguir un manejo discreto de errores de MVC Jquery trabajando con el programa de arranque de Twitter desde hace algún tiempo. Llegó al punto en el que voy a editar jquery.validate o hacer algunos cortes y barras en document.ready.

Para lograr que el manejo de errores no intrusivo funcione con Bootstrap y MVC, necesito que sea la clase de ''error'' que se agregó a la clase ''control-group''. Además de eso, la clase de ''error'' se añade a la entrada.

Me preguntaba si alguien en la comunidad ya ha encontrado una solución.

Por ejemplo

El marcado típico de bootstrap sería así ...

<div class="control-group">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

Lo que debería suceder, en el desenfoque cuando jquery.valide incendios discretos ... cambiaría a lo siguiente

<div class="control-group error">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid help-inline" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

Para que esto funcione en devolución / envío, puede hacer lo siguiente ...

//twitter bootstrap on post
$(function () {
    $(''span.field-validation-valid, span.field-validation-error'').each(function () {
        $(this).addClass(''help-inline'');
    });

    $(''form'').submit(function () {
        if ($(this).valid()) {
            $(this).find(''div.control-group'').each(function () {
                if ($(this).find(''span.field-validation-error'').length == 0) {
                    $(this).removeClass(''error'');
                }
            });
        }
        else {
            $(this).find(''div.control-group'').each(function () {
                if ($(this).find(''span.field-validation-error'').length > 0) {
                    $(this).addClass(''error'');
                }
            });
        }
    });


    $(''form'').each(function () {
        $(this).find(''div.control-group'').each(function () {
            if ($(this).find(''span.field-validation-error'').length > 0) {
                $(this).addClass(''error'');
            }
        });
    });

});

Sin embargo, en el desenfoque no funcionará como cabría esperar. No quiero editar los archivos bootstrap CSS o Jquery.validate, ya que probablemente implementarán una actualización en algún momento.

¿Crearé un delegado o un enlace a las funciones de jQuery y trabajaré desde allí? Este es un código JS profundo con el que no estoy familiarizado, pero que podría con el tiempo disparar a mi manera.

¿Alguien sabe dónde comencé con este problema o sabe dónde se implementó / discutió?

Answer 1

Además de la answer proporcionada por @ leniel-macaferi, uso lo siguiente como mi función $ (documento) .ready ():

$(function () {
    $("span.field-validation-valid, span.field-validation-error").addClass(''help-inline'');
    $("div.control-group").has("span.field-validation-error").addClass(''error'');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");
});

Esto también establece la clase de "error" en el grupo de control si la validación del lado del servidor ha fallado en una publicación de formulario y formatea cualquier resumen de validación muy bien como una alerta de error bootstrap.

Answer 2

Aquí hay una buena solución ...

Agregue esto a su archivo _Layout.cshtml fuera de jQuery(document).ready() :

<script type="text/javascript">

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === ''radio'') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest(''.control-group'').removeClass(''success'').addClass(''error'');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === ''radio'') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest(''.control-group'').removeClass(''error'').addClass(''success'');
        }
    }
});

</script>

Agregue esto dentro de $(document).ready() :

$("span.field-validation-valid, span.field-validation-error").addClass(''help-inline'');
$("div.control-group").has("span.field-validation-error").addClass(''error'');
$("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

Eres bueno para ir.

Codifique las piezas tomadas de:

Estilos de validación de Bootstrap de Twitter con ASP.NET MVC

Integración del estilo Bootstrap Error con la validación discreta de errores de MVC

la respuesta de @daveb

Answer 3

Fuera de la caja que quería en borroso para aumentar mi validación de errores. Descubrí que este no era el caso con Jquery Unobtrusive. Parecía funcionar si tenía una entrada de selección pero no en una entrada de tipo de texto. Para evitar esto por mí, quizás es torpe pero usé lo siguiente.

$(function () {
    $("input[type=''text'']").blur(function () {
        $(''form'').validate().element(this);
    });
});

Puede cambiarlo, solo está habilitado en ciertas entradas que tienen una clase css específica.

$(function () {
    $(".EnableOnblurUnobtrusiveValidation").blur(function () {
        $(''form'').validate().element(this);
    });
});

EnableOnblurUnobtrusiveValidation ... es un nombre un poco largo, pero obtienes el jist.

Answer 4

Intenta usar este complemento que he creado https://github.com/sandrocaseiro/jquery.validate.unobtrusive.bootstrap

Lo que hice de manera diferente a las otras respuestas fue anular los métodos errorPlacement y success de validate.unobtrusive con mis propias implementaciones, pero sin eliminar la implementación original para que nada se rompa.

Mi implementación se ve así:
erroplacement:

function onError(formElement, error, inputElement) {
    var container = $(formElement).find("[data-valmsg-for=''" + escapeAttributeValue(inputElement[0].name) + "'']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    //calling original validate.unobtrusive method
    errorPlacementBase(error, inputElement);

    if (replace) {
        var group = inputElement.parent();
        if (group.hasClass(''form-group'')) {
            group.addClass(''has-error'').removeClass(''has-success'');
        }
        group = group.parent();
        if (group.hasClass(''form-group'')) {
            group.addClass(''has-error'').removeClass(''has-success'');
        }
    }
}

éxito:

function onSuccess(error) {
    var container = error.data("unobtrusiveContainer");

    //calling original validate.unobtrusive method
    successBase(error);

    if (container) {
        var group = container.parent();
        if (group.hasClass(''form-group'')) {
            group.addClass(''has-success'').removeClass(''has-error'');
        }
        group = group.parent();
        if (group.hasClass(''form-group'')) {
            group.addClass(''has-success'').removeClass(''has-error'');
        }
    }
}

Answer 5

Sé que esto es antiguo, pero pensé que compartiría mi respuesta para actualizar para Bootstrap 3. Me rasqué la cabeza por bastante tiempo, antes de aprovechar la solución dada por Leniel Macaferi.

Además de cambiar las clases para reflejar Bootstrap 3, pensé que sería un buen toque presentarle al usuario un glyphicon para representar el estado del campo.

(function ($) {
var defaultOptions = {
    errorClass: ''has-error has-feedback'',
    validClass: ''has-success has-feedback'',
    highlight: function (element, errorClass, validClass) {
        var _formGroup = $(element).closest(".form-group");
        _formGroup
            .addClass(''has-error'')
            .removeClass(''has-success'');

        if (!_formGroup.hasClass("has-feedback")) {
            _formGroup.addClass("has-feedback");
        }

        var _feedbackIcon = $(element).closest(".form-group").find(".glyphicon");
        if (_feedbackIcon.length) {
            $(_feedbackIcon)
                .removeClass("glyphicon-ok")
                .removeClass("glyphicon-remove")
                .addClass("glyphicon-remove");
        }
        else {
            $("<span class=''glyphicon glyphicon-remove form-control-feedback'' aria-hidden=''true''></span>")
                .insertAfter(element);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        var _formGroup = $(element).closest(".form-group");
        _formGroup
            .removeClass(''has-error'')
            .addClass(''has-success'');

        if (!_formGroup.hasClass("has-feedback")) {
            _formGroup.addClass("has-feedback");
        }

        var _feedbackIcon = $(element).closest(".form-group").find(".glyphicon");
        if (_feedbackIcon.length) {
            $(_feedbackIcon)
                .removeClass("glyphicon-ok")
                .removeClass("glyphicon-remove")
                .addClass("glyphicon-ok");
        }
        else {
            $("<span class=''glyphicon glyphicon-ok form-control-feedback'' aria-hidden=''true''></span>")
                .insertAfter(element);
        }
    }
};

$.validator.setDefaults(defaultOptions);

$.validator.unobtrusive.options = {
    errorClass: defaultOptions.errorClass,
    validClass: defaultOptions.validClass,
};

})(jQuery);

Answer 6

Utilice TwitterBootstrapMvc .

Se encarga de los atributos de validación discreta de forma automática y todo lo que tiene que escribir para obtener un grupo de control completo con etiqueta, entrada y validación es:

@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Field)

¡Buena suerte!

Answer 7

var page = function () {
    //Update that validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".control-group").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").removeClass("error");
        }
    });
} ();

Finalmente, esto me lo arregló. Espero que esto ayude a otras personas también ...

Mi final JS terminó así.

$(function () {
    $(''span.field-validation-valid, span.field-validation-error'').each(function () {
        $(this).addClass(''help-inline'');
    });

    $(''form'').submit(function () {
        if ($(this).valid()) {
            $(this).find(''div.control-group'').each(function () {
                if ($(this).find(''span.field-validation-error'').length == 0) {
                    $(this).removeClass(''error'');
                }
            });
        }
        else {
            $(this).find(''div.control-group'').each(function () {
                if ($(this).find(''span.field-validation-error'').length > 0) {
                    $(this).addClass(''error'');
                }
            });
        }
    });


    $(''form'').each(function () {
        $(this).find(''div.control-group'').each(function () {
            if ($(this).find(''span.field-validation-error'').length > 0) {
                $(this).addClass(''error'');
            }
        });
    });

});


var page = function () {
    //Update that validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".control-group").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").removeClass("error");
        }
    });
} ();