Проверка JQuery - показать значок ошибки рядом с элементом управления и сводкой ошибок в верхней части

Question

Мне интересно использовать Jquery Validation в приложении (ASP.NET), которое я сейчас разрабатываю.

Использование настроек по умолчанию в JQuery действительно портит макет формы. Я хотел, чтобы в верхней части формы отображалась сводка ошибок, а рядом с элементом управления плавал значок, указывающий на ввод ошибок.

Я знаю, как получить сводку ошибок в верхней части формы, но не знаю, как отобразить значок рядом с элементом управления.

Я даже не уверен, возможно ли сделать оба одновременно.

Спасибо

Answer 1

Вы можете добавить обработчик в плагин проверки в качестве опции:

$("#form").validate({ 
  errorPlacement: function(error, element) {
    error.wrap("<li></li>").appendTo($("#top")); 
    $('<div class="errorIcon"></div>').insertAfter(element);
  }
});

<ul id="top" class="errors"></ul>

.errors { color: red; }
.errorIcon { background: url(errorIcon.png); width: 16px; height: 16px; float: right; }

Это добавляет ошибку к элементу с идентификатором "top" и добавляет плавающую ошибку рядом с элементом, выдавшим ошибку. Надеюсь, что эта идея вам нужна, если не последует комментарий, и я пересмотрю.

Answer 2

Я разместил сообщение в блоге здесь , в котором объясняется, как делать это от начала до конца для проверки на стороне клиента и на сервере. Надеюсь, это поможет!

Answer 3

Рассмотрите возможность использования собственной проверки ASP.NET вместо: RequiredFieldValidator, RegularExpressionValidator, RangeValidator и т. Д. Существует также элемент управления ValidationSummary . Эти элементы управления могут генерировать код JavaScript, который будет выполнять проверку на стороне клиента (просто установите для атрибута EnableClientScript значение true).

Еще одно преимущество валидаторов ASP.NET заключается в том, что вы также получаете проверку на стороне сервера - это очень важно для общедоступных веб-сайтов.