JQuery驗證和引導3爲相同的窗體組

Question

我有一個問題regared「有錯誤」類和複雜的對象。

基本上對於單一簡單類型，它工作得很好，但對於一個複雜的對象它沒有。

我有下面的代碼：

我的驗證：

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

這裏是我的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> 

這裏是模型：

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

現在，您可以看到驗證我確實（m => m），所以我傳遞整個對象。 1）如果我沒有填寫任何東西，我提交，我得到他們所有的紅色，所以風格應用，我得到所有的紅色錯誤信息。

2）我的第一個下拉列表更改爲一個值，則顏色消失，這是不是紅了，但我仍然看到其他2個錯誤信息......

3）如果我再次提交像這樣，那麼它不會再次變成紅色。

注：我添加的圖片不是下拉列表，而是文本框，因爲它有相同的問題。

任何人都有一個想法代碼有什麼問題？

更新

我注意到，當我添加值一個文本框，然後將JavaScript調用unheighlight功能，並刪除了錯誤的類，並突出顯示功能沒有要求的其他2個文本框。

Answer 1

我剛剛有同樣的問題，並找到了解決辦法。它不漂亮，但它似乎工作。

我已經添加了類multi-validation-group我form-group的div可以包含多個錯誤消息，然後執行以下自定義unhighlight功能，如果沒有錯誤的標籤仍然在它可見，只有從form-group DIV刪除has-error類。

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

一個更清潔的方式來完成，這將是結構化你的HTML標記引導所以每個輸入都有自己的形態組，這樣的驗證highlight和unhighlight方法正常工作。 Bootstrap documentation可以向您展示如何構建適當的HTML表單佈局以適應此情況。