Question

我正在开发我的第一个ASP.NET MVC 3项目。对于编辑页面上的某些字段，我希望用户能够从先前输入的值中选择一个值或输入一个新值，因此我使用jQuery自动完成来完成此操作。那部分似乎工作得很好。现在，对于某些字段，用户可以选择是否输入值，如果确实输入了一个，我想根据某些规则对其进行验证，因此我创建了自己的ValidationAttribute。

验证部分肯定会根据规则检查给定值，并为IsValid调用返回正确的布尔值。大。

我遇到的第一个问题是，如果我的验证器的IsValid返回false，它会显示我指定的错误消息，但如果我输入了有效的内容， TextBox清除它的错误背景颜色，但错误消息不清除。这种情况发生在FF或IE8中。

第二个问题是对于FireFox，当我在文本框中编辑文本时，我的自动完成值会再次显示，但在IE 8中，一旦出现错误条件，我的自动完成功能就会停止工作。偶尔，如果我输入一个我知道在自动完成列表中的值，它会显示但似乎有点不稳定。

我可能只是在做这个验证错误。这是我使用的相关代码。我对任何一个可以给出的关于这些问题的指导都很感兴趣。该属性是测试属性，但它在我的页面上显示行为。

我的验证属性：

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)

我的viewmodel片段：

[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中停止工作。

现场验证有两个问题

1 个答案: