jquery - validate - validation bootstrap js

JQuery Validation y Bootstrap 3 para el mismo grupo de formulario

Question

Tengo una pregunta sobre la clase "has-error" y el objeto complejo.

Básicamente, para el tipo sencillo simple funciona bastante bien, pero para un objeto complejo no funciona.

Tengo el siguiente código:

Mi validación

public static MvcHtmlString ValidationErrorFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string error)
{
    if (HasError(htmlHelper, ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData), ExpressionHelper.GetExpressionText(expression)))
        return new MvcHtmlString(error);
    else
        return null;
}


private static bool HasError(this HtmlHelper htmlHelper, ModelMetadata modelMetadata, string expression)
{
    string modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
    FormContext formContext = htmlHelper.ViewContext.FormContext;
    if (formContext == null)
        return false;

    if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName))
        return false;

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
    if (modelState == null)
        return false;

    ModelErrorCollection modelErrors = modelState.Errors;
    if (modelErrors == null)
        return false;

    return (modelErrors.Count > 0);
}

Javascript

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".form-group").addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).closest(".form-group").removeClass("has-error");
    }
});

Aquí está mi editortemplate:

@model DatingWebsite.Models.UserDate

<div class="form-group@(Html.ValidationErrorFor(m=>m, " has-error"))">
    @Html.LabelFor(m=>m.Birthdate, new {@class="col-sm-2 control-label"})
    <div class="col-sm-10">
        @Html.DropDownListFor(model => model.Day, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), Base.Day, new {@class="form-control" })
        @Html.DropDownListFor( model => model.Month, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i)}), Base.Month, new {@class="form-control" })
        @Html.DropDownListFor( model => model.Year,  Enumerable.Range(DateTime.Now.AddYears(-80).Year, 80-18).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString()}), Base.Year, new {@class="form-control" })

        @Html.ValidationMessageFor(m => m.Day, null, new { @class = "help-block" })
        @Html.ValidationMessageFor(m => m.Month, null, new { @class = "help-block" })
        @Html.ValidationMessageFor(m => m.Year, null, new { @class = "help-block" })
    </div>
</div>

Y aquí está el modelo:

[Required]
public int Day { get; set; }
[Required]
public int Month { get; set; }
[Required]
public int Year { get; set; }

Ahora como puedes ver para la validación que hago (m => m), entonces paso el objeto completo.

1) Si no llego nada y lo envío, todos los coloco en rojo, por lo que se aplica el estilo y recibo todos los mensajes de error en rojo.

2) Cambio la primera lista desplegable a un valor, luego el color desaparece y ya no está rojo, aunque todavía veo los otros 2 mensajes de error ...

3) si envío de nuevo como este, no volverá a ser rojo.

Nota: las imágenes que agregué no están en listas desplegables, sino en cuadros de texto porque tiene el mismo problema.

Alguien tiene una idea de lo que está mal con el código?

Actualizar

Me di cuenta de que cuando agrego valor a un cuadro de texto, el javascript llama a la función sin luz y elimina la clase de error, y la función de resaltar no se llama para los otros 2 cuadros de texto.

Answer 1

Simplemente tuve el mismo problema y encontré una solución. No es bonito, pero parece funcionar.

Agregué la clase multi-validation-group a mis divs de form-group que pueden contener múltiples mensajes de error y luego implementé la siguiente función personalizada unhighlight, que solo elimina la clase has-error del div del form-group si no hay una etiqueta de error permanece visible en ella.

jQuery.validator.setDefaults({
  errorClass: "has-error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest(".form-group").addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    var group = $(element).closest(".form-group");
    var removeClass = true;

    if (group.hasClass("multi-validation-group")) {
      removeClass = $(group).find("label.has-error:not(:hidden)").length == 0;
    }

    if (removeClass) {
      group.removeClass(errorClass);
    }
  }
});

Answer 2

Una forma más limpia de lograr esto sería estructurar su marcado de HTML Bootstrap para que cada entrada tenga su propio grupo de formulario, de esa manera los métodos de validación de highlight y no unhighlight funcionan correctamente. La documentación de Bootstrap puede mostrarle cómo construir el diseño de formulario HTML adecuado para acomodar esto.