比较编辑器模板上始终失败的客户端验证

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

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

有一个与此模型强类型的相应编辑器模板：

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

然后，我的用户新模型包含在其他模型中，例如：

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也是真的，尽管我不确定是否在服务器端进行了任何比较验证。

生成的视图源如下所示：

<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];

我也尝试使用最小和完整的js文件，但问题仍然存在。事实上，如果我在就绪函数中添加一些 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]);
});

alert（e2[0]）返回未定义，但 alert（e1[0]）返回预期的文本框元素。

原来这是 jquery.validate.unobtrusive.js 文件中的已知错误。我忘了清理旧的缓存副本！哎呀！有问题的代码行在我的文件 284 版本中位于第 9 行，以防其他人需要更改它）。搜索 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+"两边的单引号。

相关内容

最新更新

热门标签：