MVC3 - 不顯眼的驗證多個控件

Question

我創建了一個jQuery函數不顯眼MVC 3驗證...

$.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下拉列表中。

的規則是： - 如果一個爲空，則它們必須是空的。我一個，如果填寫，那麼它們必須全部填充。

的日下拉值是使用「值」傳遞給函數。其他值直接從控件中檢索。這一點工作正常。

當我調試，代碼正確，似乎稱之爲「迴歸$ .validator」語句什麼時候我希望它。然而，表單似乎仍然提交給服務器端。唯一的例外是，如果它是我留空的日下拉列表。如果我將「月份」下拉列表留空，則驗證程序無法正常工作。

就是我想要做的實現？把這個驗證器放在5個控件的每一個上看起來似乎有點矯枉過正。

Answer 1

的問題是，你已經把這個驗證的日下拉。爲了使它正常工作，它應該調用$ .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; 
    } 
} 

此代碼還不夠完善，但它應該給你一個想法在哪個方向你該走了。

Answer 2

這不是不顯眼的驗證，其高度突兀驗證。

要使用不引人注目的驗證，裝飾帶屬性的模型，如：

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驗證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"> 

Enable Unobtrusiv在web.config中è驗證：

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

檢查在Firebug的元素，以確保不顯眼的「數據-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/