MVC ClientSideValidation с использованием встроенного стиля?

Question

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

В идеале я должен что-то вроде: http://www.position -relative.net / creation / formValidator / demoValidators.html

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

В основном мне было интересно, есть ли какой-нибудь готовый плагин Jquery или MVC-совместимый проект, который позволил бы мне выполнить этот стиль проверки без особых усилий, так как я программист, а не дизайнер.

Если нет простого способа сделать это, то не беспокойтесь, и спасибо за любой совет!

Answer 1

У меня есть проверка, похожая на демонстрационный URL, который использует проверку MVC и css - это не так уж сложно сделать - мой CSS выглядит следующим образом:

.field-validation-error
{
    background:url('/Styles/icons/validation-box-medium.gif') no-repeat;
    padding:10px 4px 4px 28px;
    width:188px;
    height:20px;
    position:absolute;
    z-index:1;
    clear:both;
    color:#780701;
}

И мой код вида выглядит так:

            <div>
                <div class="editor-label">
                    <%: Html.LabelRequiredFor(model => model.Product.Price)%>
                </div>
                <div class="editor-field">
                    <%: Html.TextBoxTwoDecimalFor(model => model.Product.Price)%>
                    <div style="clear:both;"></div>
                    <%= Html.ValidationMessageFor(model => model.Product.Price)%>
                </div>
            </div>

У меня есть класс CSS для «clear: both», т.е. я никогда не использовал встроенные стили - но в качестве примера я опустил это.

Вы можете использовать часть или все содержимое этого поста, включая изображение: -)