Две проблемы с проверкой поля

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)

Мой фрагмент модели представления:

[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, если есть ошибка проверки.