Как я могу получить проверку jQuery для создания той же разметки, что и проверка ASP.NET MVC на стороне сервера?

Question

Я занимаюсь разработкой веб-приложения с использованием ASP .NET MVC 1.0 и jQuery (включая плагин проверки ).Разметка на стороне сервера для типичного представления «Изменить сущность» выглядит следующим образом:

<label for="FirstName">FirstName:</label>
<%= Html.TextBox("FirstName", Model.FirstName) %>
<%= Html.ValidationMessage("FirstName") %>

Когда в поле FirstName отправляются неверные данные, результирующий HTML-код равен

<label for="FirstName">FirstName:</label>
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text">
<span class="field-validation-error">Please enter the first name.</span>

.именно то, что вы ожидаете от ASP .NET MVC "из коробки".

Я сейчас добавляю проверку на стороне клиента с помощью jQuery, и хотел бы, чтобы она велась точно так же, т.е. задан элемент управления вводомкласс input-validation-error и span добавлен с классом field-validation-error для отображения сообщения об ошибке.

Я почти у цели, но не совсем.Использование опции errorElement позволяет валидатору создать диапазон для сообщения об ошибке, а не метку.Использование параметра errorClass означает, что элементу ввода присвоен класс input-validation-error.

Проблема, с которой я столкнулся, заключается в том, что диапазон сообщения об ошибке также получает класс ввода-validation-error, и я хочу, чтобы оно имело field-validation-error.

Я попытался использовать функции highlight и unhighlight, чтобы исправить это, но как только я начну связываться с классами на span, сама проверка перестает работать и просто отправляет форму на сервер.

У кого-нибудь есть какие-либо идеи относительно того, как я могу это исправить?Спасибо.

Answer 1

Оформление обратного вызова errorPlacement :

$('form').validate({
    errorClass: 'input-validation-error',
    errorElement: 'span',
    errorPlacement: function(error, element) {
        // Insert and manipulate the span element here:
        error.insertAfter(element)
             .removeClass('input-validation-error')
             .addClass('field-validation-error');
    },          
    rules: {
        FirstName: { 
            required: true 
        }
    },
    messages: {
        FirstName: {
            required: 'Please enter the first name.'    
        }
    }
});

Answer 2

Похоже, что проблема, с которой я столкнулся, была вызвана изменением класса, примененного к элементам input и error. Плагин ищет элементы этого класса, чтобы показать или скрыть сообщение об ошибке, а также при подсчете количества недопустимых элементов.

Чтобы избежать этих проблем, я перестал использовать строку errorClass: input-validation-error, показанную в ответе Дарина, и оставил ее в качестве значения по умолчанию. В функции errorPlacement я присоединяю правильный класс к элементам error и input, а также вставляю сообщение в нужное место в DOM. Это все, кажется, работает сейчас. JavaScript выглядит следующим образом

$('form').validate({
errorElement: 'span',
errorPlacement: function(error, element) {
    error.insertAfter(element);
    error.addClass('field-validation-error');
    element.addClass('input-validation-error');
},          
rules: {
    FirstName: { 
        required: true 
    }
},
messages: {
    FirstName: {
        required: 'Please enter the first name.'    
    }
}

});

Спасибо Дарину за его вклад, который направил меня в правильном направлении.