jQuery 没有验证第一个字段

Question

在我的表单中，jQuery 验证似乎跳过了第一个字段。如果我更改字段的顺序，它仍然是第一个未验证的字段。我花了一些时间（比我想承认的还要多）谷歌搜索，但找不到任何有用的东西。有什么想法吗？

屏幕截图：

代码：

@using (Html.BeginForm("AddAgent", "Settings", FormMethod.Post, new { @class = "form-main" }))
{
    @Html.AntiForgeryToken()

    <div>
        @Html.TextBoxFor(model => model.UserName)
        @Html.LabelFor(model => model.UserName)
        @Html.ValidationMessageFor(model => model.UserName)
    </div>

    <div>
        @Html.TextBoxFor(model => model.ContactName)
        @Html.LabelFor(model => model.ContactName)
        @Html.ValidationMessageFor(model => model.ContactName)
    </div>

    <div>
        @Html.TextBoxFor(model => model.Email)
        @Html.LabelFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>

    ...

型号：

public class RegisterAgentModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [Display(Name = "Contact name")]
    public string ContactName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [EmailAddress(ErrorMessage = "Invalid Email Address")]
    [StringLength(100, ErrorMessage = "Email address cannot be longer than 100 characters.")]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    ...

}

生成的html：

<form action="/Settings/AddAgent" class="form-main" method="post"><input name="__RequestVerificationToken" type="hidden" value="w_LGr9b6kXZ3M9dtKT5jNOWYCrLLQD97mH8DQAZ3RxozSLWpwS3E6k7oBqJu5-lnhXqbg7pBDDbOfo5nWTUqWuC732uvPdmYRXhmEApvOKQ1" />    <div>
    <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
    <label for="UserName">User name</label>
    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
<div>
    <input data-val="true" data-val-required="The Contact name field is required." id="ContactName" name="ContactName" type="text" value="" />
    <label for="ContactName">Contact name</label>
    <span class="field-validation-valid" data-valmsg-for="ContactName" data-valmsg-replace="true"></span>
</div>
<div>
    <input data-val="true" data-val-email="Invalid Email Address" data-val-length="Email address cannot be longer than 100 characters." data-val-length-max="100" data-val-required="The Email address field is required." id="Email" name="Email" type="text" value="" />
    <label for="Email">Email address</label>
    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>

验证后：

<div>
    <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="">
    <label for="UserName">User name</label>
    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
</div>
<div>
    <input data-val="true" data-val-required="The Contact name field is required." id="ContactName" name="ContactName" type="text" value="" class="input-validation-error">
    <label for="ContactName">Contact name</label>
    <span class="field-validation-error" data-valmsg-for="ContactName" data-valmsg-replace="true"><span for="ContactName" class="">The Contact name field is required.</span></span>
</div>

而且第一个 div 还是一样的

Answer 1

如果您更改字段的顺序，它仍然是第一个未验证的字段。所以验证消息或错误消息应该被一些 HTML 元素覆盖。通过使用 Firebug，您可以检查它。