C# ASP.NET MVC 3客户端验证

我有以下viewmodel：

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>
...

---

也许这行中的某些东西应该起作用：

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

---

如果您使用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>'
        }
    }
}

---

我希望这对客户端验证有帮助

你是说jquery或类似的东西，可以帮助你进行数据验证和显示错误？是的。我想“注入”或修改“jquery.validate.unobtrusive.min.js”ASP.NET MVC 3中的“new”unobtrusive client validation”，这样它会自动为我做。这意味着它会为我添加该类每个无效条目。@jgauffin，请确保

$（function（）{

部分就是这样做的，它相当于

$（document）.ready（function（））{

。啊，我不知道。谢谢这只适用于提交，在编辑表单时不起作用。@Shane，你说的编辑表单是什么意思？你是说像onblur？在这种情况下，你可以简单地使用该事件而不是提交。嘿，Darin，你的东西很有效。但是如果字段有效，我如何删除失去焦点的类？

$(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');
          }
 });
});

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

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>'
        }
    }
}

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

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