标签: unobtrusive-validation

我想了解一些事情.

来自这篇博文http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

桥接HTML和jQuery验证:适配器

编写客户端验证器涉及两个步骤:为jQuery Validate编写验证器,并编写从HTML属性获取参数值的适配器并将其转换为jQuery Validate元数据.前一个主题不在本博文的范围内(因为它实际上不是MVC特定的).

jQuery.validator.unobtrusive.adapters上有一个适配器集合.挂起适配器集合的是适配器注册方法(add)和三个帮助程序,可用于注册非常常见的适配器类型(addBool,addSingleVal和addMinMax).

请注意,它说了两个步骤.

但是如果你看看这篇文章MVC3:通过jQuery验证需要make复选框吗？你需要第二步("编写适配器")才能使验证工作 - 通过添加以下代码行:

$.validator.unobtrusive.adapters.addBool("mandatory", "required");

我在一个新的MVC 4 Internet App中测试了代码并且它工作正常,这是超简单的样本.

查看模型

public class SimpleViewModel
{
    [Mandatory(ErrorMessage = "You must agree to the Terms to register.")]
    [Display(Name = "Terms Accepted")]
    public bool IsTermsAccepted { get; set; }
}

验证属性

public class MandatoryAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return (!(value is bool) || (bool)value);
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        ModelClientValidationRule rule …

我在使用MVC3进行验证方面遇到了很多麻烦.我直接加载页面时工作正常,但是当我使用jquery AJAX POST时它不会验证:

使用这个表单加载$('#modal-dialog').load('/DartsMVC/Restaurant/Edit/13'),这是呈现的HTML:

<form action="/DartsMVC/Restaurant/Edit/13" method="post">
    <fieldset>
        <legend>Restaurant</legend>

        <input data-val="true" data-val-number="The field RestaurantID must be a number." data-val-required="The RestaurantID field is required." id="RestaurantID" name="RestaurantID" type="hidden" value="13">

        <div class="editor-label">
            <label for="Name">Name</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="furaibo">
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>

        <p>
            <input type="submit" value="Save" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
        </p>
    </fieldset>
</form>

拦截表单/提交使用AJAX POST.帖子完成后,模式对话框会自动弹出并关闭.我想在发送帖子之前验证表单:

// force change the submit data to an ajax POST (usually …

我正在hijaxing现有的表单和POST到服务器.jQuery validate执行大部分验证,但如果验证在服务器上失败,我们将错误作为JSON返回给客户端.

以下是执行此操作的代码:

<script type="text/javascript">

    $(function () {

        $("form").submit(function (e) {
            var $form = $(this);
            var validator = $form.data("validator");

            if (!validator || !$form.valid())
                return;

            e.preventDefault();

            $.ajax({
                url: "@Url.Action("index")",
                type: "POST",
                data: $form.serialize(),
                statusCode: {
                    400: function(xhr, status, err) {                           
                        var errors = $.parseJSON(err);
                        validator.showErrors(errors);
                    }
                },
                success: function() {
                    // clear errors
                    // validator.resetForm();
                    // just reload the page for now
                    location.reload(true);
                }
            });
        });

    });

</script>

问题是如果POST成功,我似乎无法清除验证错误.我已经尝试过呼叫,validator.resetForm()但这没有区别,showError()呼叫添加的错误消息仍然显示.

注意我也使用jQuery.validate.unobtrusive插件.

我有一个视图模型,其中包含某人出生日期的年/月/日属性.所有这些字段都是必需的.现在,如果有人在出生日期没有输入任何内容,则会收到3条单独的错误消息.

我想要做的是以某种方式将这些错误消息组合成一条消息,该消息只是说"出生日期是必需的".因此,如果这些字段中的一个或多个是空白的,它们将始终只获得1个验证消息.

我需要通过jquery验证和不引人注意的验证来处理客户端验证.我知道通过查看这个问题可以使用jquery validate插件.但是我不知道如何使用我的模型上的验证属性和不显眼的验证来使用asp.net mvc来实现这一点.希望有一些内置的方法可以将属性分组以进行验证,但如果没有,可以使用自定义验证属性吗？

这是我现有的模型和视图的样子:

该模型:

public class MyModel {
    [Required(ErrorMessage = "Year is required")]
    public int Year { get; set; }
    [Required(ErrorMessage = "Month is required")]
    public int Month { get; set; }
    [Required(ErrorMessage = "Day is required")]
    public int Day { get; set; }
}

风景:

<div>
    <label>Date of birth: <span style="color:red;">*</span></label>
    <div>@Html.DropDownListFor(m => m.Year, ApplicationModel.GetSelectListForDateRange(DateTime.Today.Year - 16, DateTime.Today.Year - 10), "", new{data_description="birthDate"})@Html.LabelFor(m => m.StudentBirthYear)</div>
    <div>@Html.DropDownListFor(m => m.Month, ApplicationModel.GetSelectListForDateRange(1, 12, true), "", new{data_description="birthDate"})@Html.LabelFor(m => m.StudentBirthMonth)</div> …

出于某种原因,我的客户端验证似乎不起作用:

这是我的HTML:

@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{

<hr />

@Html.ValidationSummary(true)
<hr />

<p>
    <label>Select Client_ID: </label>
    <span class="field">
        <select name="clientId" id="clientId">
            @foreach (var item in Model.ClientId)
            {
                <option value="@item">@item</option>
            }
        </select>
    </span>
</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.name)</label>
    <span class="field">
        @Html.EditorFor(model => model.UserModel.name)
    </span>
    @Html.ValidationMessageFor(model => model.UserModel.name)

</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.password)</label>
    <span class="field">
        @*<input name="password" id="password" type="password" />*@
        @Html.EditorFor(model => model.UserModel.password)
    </span>
    @Html.ValidationMessageFor(model => model.UserModel.password)
</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.email)</label>
    <span class="field">
        @*<input name="email" id="email" type="email" />*@
        @Html.EditorFor(model => model.UserModel.email) …

我有一个使用不显眼的JQuery验证和验证摘要的表单.它很棒.但是,此表单执行Ajax POST,返回JSON结果.如果结果== true,那么我继续.但是,如果JSON结果返回一个消息数组,我想触发表单验证以更新字段.错误返回如下:

{
    "errors": [ 
       { "key" : "NameFirst", "message": "This is the message" },
       { "key" : "NameLast", "message": "This is the message" } 
     ]
}

我解析JSON结果并调用showErrors(),如下所示:

for (var j = 0; j < response.errors.length; j++) {
    var key = response.errors[j].key;
    var error = {};
    error[key] = response.errors[j].message;
    $form.data('validator').showErrors(error);
}

这会正确突出显示字段,但不会更新验证摘要.我怎样才能更新？

此外,有时错误是通用的,不会映射到模型中的特定属性/字段.在这种情况下,它们返回null键,如:

{
     "errors": [ 
        { "key" : null, "message": "This is the message" },
        { "key" : null, "message": "This is the other message" }, 
        { "key" …

我在使用asp.net MVC客户端验证时遇到了问题.

我基本上可以使用它,但是,在用户单击提交按钮之前不会显示验证摘要,即使单个输入被突出显示为无效,因为用户选项卡/单击等通过表单.这一切都发生在客户端.

我会想到,一旦发现输入字段无效,就会显示验证摘要.

这种行为是设计的吗？是否有任何解决方法,因为我希望一旦发现其中一个输入字段无效就会显示验证摘要.

我的代码基本上是,

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
...
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(false)
        @Html.EditorFor(model => model);   
        ...

我的_Layout.cshtml参考资料jquery-1.4.4.min.js.

通过某种表单生成器,在页面上呈现元素列表,并且它们都具有对它们的验证.当我查看HTML源代码时,我看到如下内容:

<input type="text" id="email" name="email" data-val-required="No valid email address!" data-val="true">

我需要以某种方式动态地启用/禁用此类元素的验证.我尝试启用/禁用该data-val属性,方法是将其设置为false然后再返回true.但它似乎没有回应.验证总是在那里!

任何人都知道如何以动态方式启用/禁用某些字段的验证？

我正在使用ASP.NET MVC 4进行不引人注意的客户端验证.我的应用程序中的语言是德语(在web.config文件中定义)

如果我有一个必填字段(在我的代码优先类中配置了数据注释),客户端验证工作正常.唯一的缺点:消息不是本地化的.

字段XXXX是必需的.

有没有解决这个问题的方法？

我正在使用EmailAddressAttribute在我的模型上使用.

问题是当我使用(完全有效)的电子邮件地址时

óscar@yahoo.com

它说这是无效的.

模型:

public class ForgotPasswordViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    public CmsContentPagesModel PageCmsContent { get; set; }

    public CmsContentPagesModel PageCmsContentInfoIcon { get; set; }
    public CmsContentPagesModel PageCmsContentRightPanel { get; set; }
}

这是属性的问题,还是以某种方式必须指定法国电子邮件是否可以？

呈现的输入框:

<div class="col-md-5">
     <input class="form-control" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
     <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>

我还从客户端验证中提取了正则表达式,以下行返回false

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( 'óscar@yahoo.com' …