MVC 3 field validation keep focus on failure - asp.net-mvc-3

Question

We are working on some accessibility standards for a basic website and need to have focus returned to a username field if it is has failed validation as defined in the model. I have read several posts that indicate this is the behavior as it exists. But, this is not the behavior we are seeing. I am open to mvc natice functionality (we are using mvc 3 with razor) or jquery)

Answer 1

I have read several posts that indicate this is the behavior as it exists
Weird, where did you those posts? I would recommend you notifying the author of such posts that this is not a default behavior.
And of course when something is not the default behavior, if you want to achieve it, you will have to implement it. For example you haven't exactly specified how it should behave if there are multiple errors: which field should be focused? The first? The third? The seventh?
Let's suppose that you want to focus the first. Assuming you are using jQuery you could add the following to your view:
#if (!ViewData.ModelState.IsValid)
{
var key = ViewData
.ModelState
.Where(x => x.Value.Errors.Count > 0)
.Select(x => x.Key)
.FirstOrDefault();
if (!string.IsNullOrEmpty(key))
{
<script type="text/javascript">
$(function () {
$(':input[name=#Html.Raw(Json.Encode(key))]').focus();
});
</script>
}
}
and you are pretty much done. Well, almost, a further improvement of this code would of course be to externalize this into a reusable HTML helper to avoid transforming your views into something absolutely horrible. For example you could have a custom helper which would implement this behavior and all you have to do is add the following to your _Layout:
#Html.FocusOnFirstError()
Could be implemented with something along the lines of:
public static class HtmlExtensions
{
public static IHtmlString FocusOnFirstError(this HtmlHelper htmlHelper)
{
if (htmlHelper.ViewData.ModelState.IsValid)
{
return MvcHtmlString.Empty;
}
var key = htmlHelper
.ViewData
.ModelState
.Where(x => x.Value.Errors.Count > 0)
.Select(x => x.Key)
.FirstOrDefault();
if (string.IsNullOrEmpty(key))
{
return MvcHtmlString.Empty;
}
var script = new TagBuilder("script");
script.Attributes["type"] = "text/javascript";
script.InnerHtml = string.Format(
"$(function() {{ $(':input[name={0}]').focus(); }});",
Json.Encode(key)
);
return new HtmlString(script.ToString(TagRenderMode.Normal));
}
}