MVC3 - 不显眼的验证多个控件

时间:2012-03-15 12:37:32

标签: jquery asp.net-mvc-3 unobtrusive-validation

我为不引人注目的MVC 3验证创建了一个jQuery函数......

$.validator.addMethod('dtdt',
    function (value, element, parameters) {

        var idmonth = '#' + parameters['m'];
        var idyear = '#' + parameters['y'];
        var idhour = '#' + parameters['h'];
        var idminute = '#' + parameters['mn'];
        var controlmonth = $(idmonth);
        var controlyear = $(idyear);
        var controlhour = $(idhour);
        var controlminute = $(idminute);
        var mv = controlmonth.val();
        var yv = controlyear.val();
        var hv = controlhour.val();
        var mnv = controlminute.val();

        if (value == "" || mv == "" || yv == "" || hv == "" || mnv == "") 
            if (value != "" || mv != "" || yv != "" || hv != "" || mnv != "")
                return $.validator.methods.required.call(
                    this, value, element, parameters);

        return true;
    }
);

这背后的想法是我有5个下拉控件彼此相邻(日,月,年,小时和分钟)。我已将此验证器放在Day下拉列表中。

规则是: - 如果一个是空的,那么它们都必须是空的。我填写一个,然后他们都必须填写。

使用" value"将Day下拉值传递给函数。其他值直接从控件中检索。这个位工作正常。

当我调试时,代码正确地似乎调用"返回$ .validator"完全是我期待它的声明。但是表单似乎仍然提交给服务器端。唯一的例外是,如果它是一天的下拉,我就留空了。如果我将“月份”下拉列表留空,则验证程序无效。

我想做的是可以实现的吗?将这个验证器放在5个控件中的每个控件上似乎有点过分了。

2 个答案:

答案 0 :(得分:1)

问题在于您已将此验证器放在Day下拉列表中。为了使它工作,它应该调用$ .validator.methods.required.call来获取正确的空元素,如下所示:

if (value == "" || mv == "" || yv == "" || hv == "" || mnv == "") {
    if (value != "" || mv != "" || yv != "" || hv != "" || mnv != "") {
        if (value == "")
            $.validator.methods.required.call(this, value, element, parameters);
        if (mv == "")
            $.validator.methods.required.call(this, mv, controlmonth, parameters);
        if (yv == "")
            $.validator.methods.required.call(this, yv, controlyear, parameters);
        if (hv == "")
            $.validator.methods.required.call(this, hv, controlhour, parameters);
        if (mnv == "")
            $.validator.methods.required.call(this, mnv, controlminute, parameters);
        return false;
    }
}

这段代码仍然不完美,但它应该让你知道应该去哪个方向。

答案 1 :(得分:0)

这不是不显眼的验证,它是非常突兀的验证。

要使用不显眼的验证,请使用属性修饰模型,例如:

    public class ValidationModel {
    [Required]
    public string FirstName { get; set; }
 
    [Required, StringLength(60)]
    public string LastName { get; set; }
 
    [Range(1, 130)]
    public int Age { get; set; }
}

使用MVC助手进行HTML输入和验证消息:

    @Html.TextBoxFor(x => x.FirstName)                                  
    @Html.ValidationMessageFor(x => x.UserName)

    @Html.TextBoxFor(x => x.LastName)                                   
    @Html.ValidationMessageFor(x => x.LastName)

    @Html.TextBoxFor(x => x.Age)
    @Html.ValidationMessageFor(x => x.Age)

包括JQuery Validate Lirary和不显眼的验证库:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">

在web.config中启用不显眼的验证:

<appSettings>
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

检查firebug中的元素,以确保附加不引人注目的“data-val”属性,例如:

<input data-val="true" data-val-length="The field Name must be a string with a maximum length of 5." data-val-length-max="5" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />

验证将起作用,不需要javascript,完全不显眼。

更多信息:

http://weblogs.asp.net/mikaelsoderstrom/archive/2010/10/06/unobtrusive-validation-in-asp-net-mvc-3.aspx

http://thepursuitofalife.com/asp-net-mvc-3-unobtrusive-javascript-validation-with-custom-validators/