Проверка клиента ASP.NET MVC 3

Question

У меня есть следующая модель представления:

public class ViewModel
{
    [Display(Name = "firstname", ResourceType = typeof(Views.Validation))]
    public string firstname { get; set; }

    [Required(ErrorMessageResourceName="required", ErrorMessageResourceType = typeof(Views.Validation))]
    [Display(Name="lastname", ResourceType = typeof(Views.Validation))]
    public string lastname { get; set; }

    ...
}

и мой просмотр HTML:

    ...
<div class="row valid showMsg">
    <div class="itemWrap clearfix">
        <label>@Html.LabelFor(model => model.firstname)<span class="iconReq">&nbsp;</span>:</label>
        @Html.EditorFor(model => model.firstname)
    </div>
    <div class="info">
        <p class="errorMsg">@Html.ValidationMessageFor(model => model.firstname)</p>
        <p class="infoMsg">info message here</p>
        <p class="focusMsg">text on active</p>
    </div>
</div>
...

Если вы заметили в моем представлении HTML, у меня есть <div class="row valid showMsg"> с классом "showMsg", который управляет отображением сообщений внутри моего <div class="info">.

Теперь для проверки сервера я написал специальный помощник HTML, который добавляет, что этот класс "showMsg" в div, когда он недействителен, выглядит так:

 public static MvcHtmlString ValidationRowFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression)
 {
     MvcHtmlString normal = html.ValidationMessageFor(expression);

     if (normal != null)
     {
         return MvcHtmlString.Create("errorOn");
     }

     return null;
 }

и используйте его так:

<div class="row valid @Html.ValidationRowFor(model => model.firstname)">

Я хотел бы сделать то же самое для проверки клиента. Чтобы он автоматически добавлял класс «showMsg» к родителю при ошибке. Как бы я это сделал?

Спасибо.

Edit: хорошо, это работает для обычного HTML, но не в MVC3 ??

$(function(){
 var validator = $(".form").validate({
          highlight: function(element) {
             $(element).parents().closest('div.row').addClass('errorOn');
          },

          unhighlight: function(element) {
             $(element).parents().closest('div.row').removeClass('errorOn');
          }
 });
});

Answer 1

если вы используете правила проверки jquery, вы можете сделать что-то вроде этого (я получаю этот код из своего проекта, я изменяю то, что вам нужно, errorClass:

var contactsRules = {
    errorClass: 'showMsg',
    rules: {
        Name: { required: true },
        Surname: { required: true },
        Email: { required: true, email: true }
    },
    messages: {
        Name: {
            required: '<p class="errore">*</p>'
        },
        Surname: {
            required: '<p class="errore">*</p>'
        },
        Email: {
            required: '<p class="errore">*</p>',
            email: '<p class="errore">*</p>'
        }
    }
}

Я полагаю, у вас есть форма с именем "contact", создайте файл js с этим кодом:

$(document).ready(function() {
   var contactRules = ... //The code posted before this
   $('#contact').validate(contactRules);

   $('#contact').submit(function() {
      return $(this).validate();
   });
});

Я надеюсь, что это может помочь

Answer 2

Может быть, что-то из строк должно сделать работу:

$(function () {
    $('form').submit(function () {
        $(this).validate().invalidElements().each(function () {
            $(this).closest('div.row.valid').addClass('showMsg');
        });
    });
});