Question

I am trying to move focus to a validation error message using Jquery. By moving focus to the error message a disability screen reader will then read the error message to the user. I am using JQuery Validation:

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

the invalid handler never fires. I never hit the alert statement. Any ideas?

Here is the HTML that is generated from the Razor View Engine:

<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

It doesn’t look like you have any required fields. You can either add them to the rules or add a “required” class to the fields.

Also, it looks like you are mixing ASP.NET validation with jQuery validate; MS supplies both but you only use one.