ASP.Net validation summary causes page to jump to top

asp.netvalidation

I have a simple form with a few required field validators and a validation summary control. When I submit the form, the client validation will cause the form to jump to the top of the page. If i remove the validation summary, the page does not move.

Heres a quick example:

<asp:TextBox ID="test" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="testrequired" runat="server" ControlToValidate="test">*</asp:RequiredFieldValidator>
<asp:ValidationSummary ID="summary" runat="server" />
<asp:Button ID="submit" runat="server" Text="submit" />

I've tried setting SetFocusOnError="true" in the required field validator and MaintainScrollPositionOnPostback="true" for giggles – even though this isn't a postback – without any luck. Is there a known solution for this problem?

EDIT:

I've found the problem in the js generated by WebResource.axd. Seems to come down to a single line in the ValidationSummaryOnSubmit() function.

line 534: window.scrollTo(0,0);

Any ideas on how to remove or bypass this?

EDIT2:

Quick work around for the time being:

set EnableClientScript="false" for all validation controls (disabling client validation)
set MaintainScrollPositionOnPostback="true" in Page directive

Still hoping for a client side solution…

EDIT3:

It seems a better work around is to just override the window.scrollTo() function so that it does nothing when called by the validation script:

<script type="text/javascript">
    window.scrollTo = function() { }
</script>

Adding the above anywhere on the page leaves the client validation in tact, but disables the window.scrollTo() method throughout the page

Best Answer

Two possible work arounds:

Disable client validation and jump to correct position on post back:

* set EnableClientScript="false" for all validation controls (disabling client validation)
* set MaintainScrollPositionOnPostback="true" in Page directive

Disable the scrollTo function in javascript:

<script type="text/javascript">
    window.scrollTo = function() { }
</script>

Client Side

Using the jQuery.validate library should be pretty simple to set up.

Specify the following settings in your Web.config file:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

When you build up your view, you would define things like this:

@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                                new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)

NOTE: These need to be defined within a form element

Then you would need to include the following libraries:

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

This should be able to set you up for client side validation

Resources

http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx

Server Side

NOTE: This is only for additional server side validation on top of jQuery.validation library

Perhaps something like this could help:

[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
    //Save data
    return Json(new { Success = true } );
}

Where ValidateAjax is an attribute defined as:

public class ValidateAjaxAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!filterContext.HttpContext.Request.IsAjaxRequest())
            return;

        var modelState = filterContext.Controller.ViewData.ModelState;
        if (!modelState.IsValid)
        {
            var errorModel = 
                    from x in modelState.Keys
                    where modelState[x].Errors.Count > 0
                    select new
                           {
                               key = x,
                               errors = modelState[x].Errors.
                                                      Select(y => y.ErrorMessage).
                                                      ToArray()
                           };
            filterContext.Result = new JsonResult()
                                       {
                                           Data = errorModel
                                       };
            filterContext.HttpContext.Response.StatusCode = 
                                                  (int) HttpStatusCode.BadRequest;
        }
    }
}

What this does is return a JSON object specifying all of your model errors.

Example response would be

[{
    "key":"Name",
    "errors":["The Name field is required."]
},
{
    "key":"Description",
    "errors":["The Description field is required."]
}]

This would be returned to your error handling callback of the $.ajax call

You can loop through the returned data to set the error messages as needed based on the Keys returned (I think something like $('input[name="' + err.key + '"]') would find your input element

Best Answer

Related Solutions

How to prevent a page to jump to top position after failed validation

Jquery – Use ASP.NET MVC validation with jquery ajax

Client Side

Resources

Server Side

Related Topic