How to move focus to first error field with MVC client validation?

Question

I use MicrosoftMvcValidation.js for client side validation. Error messages show correct. However, my page is kind of long and when the error shows, it does not automatically scroll up to show the 1st error message or set focus to error field. How can I show a message beside button like "Error happens. Please correct your input", but without list of field errors; or automatically move focus to 1st error field?

Answer 1

Whenever you have validation error, client-side validation will add input-validation-error class to those input boxes that caused validation. For example, in MVC3 if you have unobtrusive validation enabled you will get additional javascript files added to your file, like

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

This means that you can use your own jQuery functions after these lines that would detect whether input-validation-error exists or not. This piece of code is something that I am using in my applications:

$(document).ready(function () {
    $("form[action*='New/']").submit(function () {
        var firstError = $(this).children(":first has('.input-validation-error')");

        if (firstError != null) {
            firstError.focus();

            return false; // no form posting
        }
    });
});

Replace the form[action*='New/'] with your form action, e.g. form[action*='/MyController/MyRegistrationAction/'] (*= means find this text at any location).