現場驗證的兩個問題

Question

我正在開發我的第一個ASP.NET MVC 3項目。對於編輯頁面上的某些字段，我希望用戶能夠從先前輸入的值中選擇一個值或輸入一個新值，因此我使用jQuery自動完成功能來完成此操作。這部分似乎工作得很好。現在，對於某些字段用戶可以選擇是否輸入值，如果他們輸入一個值，我想根據一些規則驗證它，所以我創建了我自己的ValidationAttribute。

驗證部分將根據規則檢查給定值，並返回IsValid調用的正確布爾值。大。

的第一個問題說我有是，如果我的驗證的IsValid返回false，它會顯示我指定的錯誤消息，但如果我輸入一些東西，是有效的，TextBox清除這是錯誤的背景顏色，但錯誤信息不清楚。這發生在FF或IE8中。

的第二個問題是，火狐，我的自動完成值將再次顯示，當我在文本框中，但在IE 8編輯文本，一旦出錯條件存在，我的自動完成停止工作。偶爾，如果我輸入一個我知道在自動完成列表中的值，它會顯示出來，但看起來有點片面。

我可能只是做這個驗證錯誤的東西。這是我使用的相關代碼。對於任何這些問題的指導，我都會很感興趣。該屬性是一個測試，但它展現了我的頁面上的行爲。

我ValidationAttribute：

public class MyAttribute : ValidationAttribute 
{ 
    ... 

    public override bool IsValid(object value) 
    { 
     if (value == null) 
     { 
     return true; 
     } 
     var stringValue = Convert.ToString(value); 
     if (stringValue.Length == 0) 
     { 
     return true; 
     } 
     if (stringValue.Trim().Length == 0) 
     { 
     return false; 
     } 
     return true; 
    } 

    ... 

}

我的自動完成代碼：

$("#toppingid").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: '@Url.Action("AvailableToppings", "IceCream")', type: "POST", dataType: "json", 
      data: { query: request.term }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { label: item, value: item }; 
       })) 
      } 
     }) 
    }, 
    minLength: 1 
}); 

我的控制器動作：

public JsonResult AvailableToppings() 
{ 
    // I actually retrieve this differently, but you get the idea 
    List<string> all = new List<string>() { "BerryCrush", "Caramel", "Fudge" }; 
    return Json(all, JsonRequestBehavior.AllowGet); 
} 

我的觀點片段：

@Html.TextBoxFor(model => model.Topping, new { @id = "toppingid" }) 
@Html.ValidationMessageFor(model => model.Topping) 

我的視圖模型片段：

[DisplayName("Topping:")] 
[MyAttribute(ErrorMessage = "Can't be all blanks!")] 
public string Topping { get; set; } 

在我的職務行爲，我的邏輯是這樣的：

[HttpPost] 
public ActionResult Create(IceCreamCreateEditViewModel viewModel) 
{ 
    if (ModelState.IsValid) 
    { 
     // stuff happens here which isn't germane 

     return RedirectToAction("Index"); 
    } 
    // redisplay the view to the user 
    return Create(); 
} 

我想這是所有的代碼相關的作品。感謝您提供的任何指導。

Answer 1

關於你的第一個問題，看起來自動完成插件在進行選擇時從文本框中刪除input-validation-error類。正因爲如此，文本框清除了它的背景。要解決這一種方法是認購select事件，並重新應用此類別中，如果有錯誤（通過檢查是否顯示錯誤標籤）：

$("#toppingid").autocomplete({ 
    source: function (request, response) { 
     ... 
    }, 
    select: function (event, ui) { 
     var topping = $('#toppingid'); 
     // find the corresponding error label 
     var errorLabel = $('span[data-valmsg-for="' + topping.attr('name') + '"]'); 
     if (errorLabel.is(':visible')) { 
      // if the error label is visible reapply the CSS class 
      // to the textbox 
      topping.addClass('input-validation-error'); 
     } 
    }, 
    minLength: 1 
}); 

至於你的第二個問題而言，不幸的是我我無法複製它。如果存在驗證錯誤，自動完成功能在IE8中不會停止工作。