Pull to refresh

ASP.NET MVC: кастомизация отображения клиентской валидации с использованием JQuery.Validate.Hooks + Tipsy

Reading time 3 min
Views 10K
ASP.NET MVC Framework позволяет очень легко производить как серверную так и клиентскую валидацию «из коробки». Использование DataAnnotations в ваших моделях превращает процесс валидации в максимально простой алгоритм для разработчика. Фреймворк, в свою очередь, может отображать ошибки используя валидацию JQuery, или же в случае более комплексных ситуаций, ошибки могут быть возвращены уже после серверной валидации. Вот пример небольшой модели и соответствующих сообщений валидации в ошибочных полях.

Пример модели с атрибутами DataAnnotation

Отображение стандартных сообщений об ошибках

В данном случае все поля модели являются обязательными, на что указывает атрибут «[Required]». Именно поэтому под каждым из полей отображается сообщение об ошибке. Просто замечательный функционал, но что же здесь не так? Для того чтобы более четко представить себе проблему и заодно узнать об еще одной «фишке» фреймворка попробуем ввести в поле «Price» любой нечисловой символ.
Вывод длинного сообщения об ошибке
Не смотря на то, что мы не указывали никаких дополнительных атрибутов для нашей модели ASP.NET MVC понимает, что поле «Price» имеет числовой тип и потому опять отображает еще более длинное, не очень эстетичное сообщение об ошибке. К тому же чрезмерная его высота приводит к изменениям высоты формы. Это нас не устраивает, поскольку в нашем случае наличие множества таких сообщений, которые то появляются, то исчезают, приведет к скачкам высоты формы, а это негативно повлияет на общий вид страницы.

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

Наша цель заключается в приведении предыдущей формы к следующему виду:

Результат

Начнем с Razor разметки нашей формы.

@model WebUI.ViewModels.LinkViewModel
@using (Html.BeginForm("AddLink", "Links", FormMethod.Post, new { enctype = "multipart/form-data", name = "AddLinkForm", @class = "add-link" }))
{
    <h2>
        <b>Add a new link</b><a href="#">(?)</a></h2>
    <div class="right">
        <div class="fields">
            <div class="close-button" id="hide_form_link"></div>
            <div id="cell">
                <div class="text-field name-url">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model=>model.Name, null, new {style="display:none;"})
                </div>
            </div>
            <div id="cell">
                <div class="text-field for-file">
                    @Html.TextBoxFor(model => model.Link, new { @class = "file_1", @type = "file" })
                    @Html.ValidationMessageFor(model => model.Link, null, new { style = "display:none;" })
                </div>
            </div>
            <div id="cell">
                <div class="text-field price-url">
                    @Html.EditorFor(model => model.Price)
                    @Html.ValidationMessageFor(model => model.Price, null, new { style = "display:none;" })
                </div>
            </div>
        </div>
        <div class="button">
            <span class="left-bg"></span><span class="right-bg">Add link </span>
            <input type="submit" name="" />
        </div>
    </div>
    <div class="clearFix">
    </div>
}

Здесь всё стандартно, отмечу лишь несколько деталей:
  • каждый input обернут в дополнительный блок ;
    сообщения валидации скрываются при помощи атрибута style = "display:none;".

  • Вот и всё, путем простых действий мы адаптировали нашу форму для цветовой подсветки ошибок валидации, а также реализовали вывод сообщений валидации в виде всплывающих подсказок при наведении на соответствующий элемент.
Tags:
Hubs:
+10
Comments 0
Comments Leave a comment

Articles