同一表单组的JQuery验证和引导3
我有一个关于“has error”类和复杂对象的问题 基本上,对于单个简单类型,它工作得很好,但对于复杂对象,它就不行了 我有以下代码: 我的确认:同一表单组的JQuery验证和引导3,jquery,validation,jquery-validate,twitter-bootstrap-3,Jquery,Validation,Jquery Validate,Twitter Bootstrap 3,我有一个关于“has error”类和复杂对象的问题 基本上,对于单个简单类型,它工作得很好,但对于复杂对象,它就不行了 我有以下代码: 我的确认: public static MvcHtmlString ValidationErrorFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, s
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);
}
这是我的编辑模板:
@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>
现在,正如您所看到的,我进行了验证(m=>m),所以我传递了整个对象
1) 如果我没有填写任何内容并提交,我会将所有内容都显示为红色,因此会应用样式,并将所有错误消息显示为红色
2) 我将第一个下拉列表更改为一个值,然后颜色消失,不再是红色,尽管我仍然看到其他两条错误消息
3) 如果我再次像这样提交,它将不会再次变为红色
注意:我添加的图片不是下拉列表,而是文本框,因为它有同样的问题
有人知道代码出了什么问题吗
更新
我注意到,当我向一个文本框添加值时,javascript调用unheightlight函数并删除has error类,而对其他两个文本框不调用highlight函数。我只是遇到了同样的问题并找到了解决方案。这不漂亮,但似乎管用 我已经将类
多验证组
添加到我的表单组
div中,该组可以包含多条错误消息,然后实现了以下自定义取消高亮功能,该功能仅在表单组
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);
}
}
});
一种更简洁的方法是构造HTML引导标记,使每个输入都有自己的表单组,这样验证
highlight
和unhighlight
方法就可以正常工作。可以向您展示如何构建适当的HTML表单布局以适应这种情况。Hmm奇怪,没有人对此有任何经验:(
[Required]
public int Day { get; set; }
[Required]
public int Month { get; set; }
[Required]
public int Year { get; set; }
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);
}
}
});