jQuery將焦點移至驗證錯誤消息

Question

我正在嘗試將焦點移至使用Jquery的驗證錯誤消息。通過將焦點移至錯誤消息，殘障屏幕閱讀器將向用戶讀取錯誤消息。我使用jQuery驗證：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

HTML：

@Html.ValidationSummary(true, "Invalid Login! Please correct the errors and try again.") 
@using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "logonForm" })) 
{ 
    @Html.AntiForgeryToken() 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 
      <div class="editor-label"> 
       @Html.LabelFor(m => m.UserName) 
      </div> 
      <div class="editor-field"> 
       @Html.TextBoxFor(m => m.UserName, new { autocomplete = "off" }) 
       @Html.ValidationMessageFor(m => m.UserName) 
      </div> 
      <div class="editor-label"> 
       @Html.LabelFor(m => m.Password) 
      </div> 
      <div class="editor-field"> 
       @Html.PasswordFor(m => m.Password, new { autocomplete = "off" }) 
       @Html.ValidationMessageFor(m => m.Password) 
      </div> 
      <p> 
       <input type="submit" value="Log On" id="btnLogOn" /> 
      </p> 
     </fieldset> 
    </div> 
} 

JQuery的：

$("#logonForm").validate({ 
      invalidHandler: function (form, validator) { 
       var errors = validator.numberOfInvalids(); 
       alert(errors); 
      } 
     }); 

無效處理程序永遠不會觸發。我從來沒有發出警報聲明。有任何想法嗎？

這裏是從Razor視圖引擎生成的HTML：

<form action="/Account/LogOn" id="logonForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="VsOtMMJFUi6nvl38UAqVWsNkteNOaWBRKTUPAHgvn2xRKqBiZDbF//Glbl9IXJUkQssdP7wDk8MKskmN8HYtem+HSDViqRioxEatXs2oqzftBsdhzsrFgZ+akOPb0OZzFMer+A==" />  <div> 

      <fieldset> 

       <legend>Account Information</legend> 

       <div class="editor-label"> 

        <label for="UserName">Username</label> 

       </div> 

       <div class="editor-field"> 

        <input autocomplete="off" data-val="true" data-val-regex="Malicious Username" data-val-regex-pattern="^[a-zA-Z0-9\.\@\w-\w_]+$" data-val-required="The Username field is required." id="UserName" name="UserName" type="text" value="" /> 

        <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span> 

       </div> 

       <div class="editor-label"> 

        <label for="Password">Password</label> 

       </div> 

       <div class="editor-field"> 

        <input autocomplete="off" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" /> 

        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> 

       </div> 

       <p> 

        <input type="submit" value="Log On" id="btnLogOn" /> 

       </p> 

      </fieldset> 

     </div> 

</form> 

Answer 1

它看起來並不像您有任何必填字段。您可以將它們添加到規則中，也可以將「必需」類添加到字段中。

此外，它看起來像你正在混合ASP.NET驗證與jQuery驗證; MS提供兩種，但只使用一種。