Question

我有一个带有电子邮件地址属性和确认电子邮件地址属性的视图模型，如下所示：

public class UserNewModel
{
    [Required]
    [StringLength(100)]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email Address")]
    public string EmailAddress { get; set; }

    [Required]
    [StringLength(100)]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Confirm Email Address")]
    [Compare("EmailAddress", ErrorMessage = "The email address and confirmation email address do not match.")]
    public string ConfirmEmailAddress { get; set; }

}

对此模型强烈输入了相应的EditorTemplate：

@model SponsorworksSaaS.UI.Models.UserNewModel

<div class="editor-label">
    @Html.LabelFor(m => m.EmailAddress)
</div>
<div class="editor-field">
    @Html.EditorFor(m => m.EmailAddress)
    @Html.ValidationMessageFor(m => m.EmailAddress)
</div>
<div class="editor-label">
    @Html.LabelFor(m => m.ConfirmEmailAddress)
</div>
<div class="editor-field">
    @Html.EditorFor(m => m.ConfirmEmailAddress)
    @Html.ValidationMessageFor(m => m.ConfirmEmailAddress)
</div>

我的UserNewModel随后包含在其他模型中，例如：

public class CompanyDetailsModel
{
    ....

    /// <summary>
    /// Used to capture the initial user account details when creating a new company
    /// </summary>
    [Display(Name = "Initial User Account")]
    public UserNewModel NewCompanyUser { get; set; }

}

和与此父模型关联的相应强类型视图使用@ Html.EditorFor来显示编辑器模板：

@model SponsorworksSaaS.UI.Models.CompanyDetailsModel

<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(true, "Company change was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <legend>Company Information</legend>
            <div>
               @Html.EditorFor(m => m.NewCompanyUser)
            </div>
            <p>
                <input type="submit" name="btnSubmit" value="Save Company" />
            </p>
        </fieldset>
    </div>
}

客户端的比较验证始终无法用于电子邮件地址。如果我在比较电子邮件地址文本框中输入相同的字符串，则在将焦点移开时，它始终显示比较验证错误消息。即使比较验证在客户端显示失败，如果我提交表单，ModelState.IsValid为true，尽管我不确定在服务器端是否进行了任何比较验证。

生成的视图源如下所示：

<div class="editor-label">
    <label for="NewCompanyUser_EmailAddress">Email Address</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Email Address must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The Email Address field is required." id="NewCompanyUser_EmailAddress" name="NewCompanyUser.EmailAddress" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="NewCompanyUser.EmailAddress" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
    <label for="NewCompanyUser_ConfirmEmailAddress">Confirm Email Address</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-equalto="The email address and confirmation email address do not match." data-val-equalto-other="*.EmailAddress" data-val-length="The field Confirm Email Address must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The Confirm Email Address field is required." id="NewCompanyUser_ConfirmEmailAddress" name="NewCompanyUser.ConfirmEmailAddress" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="NewCompanyUser.ConfirmEmailAddress" data-valmsg-replace="true"></span>
</div>

我已尝试在jquery.validate.unobtrusive.js文件中添加单引号，如此处其他帖子所示，但这并未解决问题。

element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];

更改为：

element = $(options.form).find(":input[name='" + fullOtherName + "']")[0];

我也尝试过使用min和full js文件，但问题仍然存在。实际上，如果我在ready函数中添加一些jquery：

$(function () {
    var e1 = $('form').find(":input[name=*.EmailAddress]");
    var e2 = $('form').find(":input[name='*.EmailAddress']");
    alert(e1);
    alert(e1[0]);
    alert(e2);
    alert(e2[0]);
});

警报（e2 [0]）返回undefined，但alert（e1 [0]）返回预期的文本框元素。

Answer 1

原来这是jquery.validate.unobtrusive.js文件中的已知错误。我忘了清理旧的缓存副本！ D'哦！在我的文件版本9中的第284行，代码有问题，其他人需要更改它。搜索equalto将接近正确的代码段。

Visual Studio的干净解决方案就足以应对这一伎俩。

我没有设法让jquery.validate.unobtrusive.min.js文件工作，尽管改变了

b.add("equalto",["other"],function(b){var h=g(b.element.name),i=b.params.other,d=e(i,h),f=a(b.form).find(":input[name="+d+"]")[0];c(b,"equalTo",f)});

到

b.add("equalto",["other"],function(b){var h=g(b.element.name),i=b.params.other,d=e(i,h),f=a(b.form).find(":input[name='"+d+"']")[0];c(b,"equalTo",f)});

请注意find方法调用中“+ d +”周围的单引号。

比较客户端验证总是在编辑器模板上失败

1 个答案: