ASP.NET MVC handling server side validation on jQuery form wizard/tabs

Question

I'm working on a large form that I'm looking to improve the usability of by sectioning it into a jQuery form wizard (jQuery tabbed panels).

I have already implemented both client-side validation and server-side validation. Client side validation is performed on each tabbed panel before moving to the next tabbed panel and server side validation is only performed once the form is posted to the server.

The thing I'm having trouble with is how to best handle server-side validation errors. Currently if the form is posted to the server it returns the form and shows any errors however this doesn't really work to well with jQuery tabbed panels as the tabbed panel resets to its default state once the form is returned.

If the form fails server side validation how do I reload the form and automatically show the tabbed panel in which the inputs that failed server side validation reside. For example, lets say I have three tabbed panels in my form wizard. If an input in the third tabbed panel failed server side validation how do I reload the form with the third tabbed panel shown.

I have tried creating the from wizard server-side where each section has its own view and controller action however however with this approach it much harder to create a navigation bar to move between the form section.

This is not a trivial problem as there are many possible scenarios. For example you could have error on tabs 2 and 3. What then? My suggestion to you is to use Html.ValidationSummary that would show up on the top of the page for example and then rely on user to find the proper tab or you can customize Validation Summary messages to contain the link to the tab maybe? — Marko
– Marko, Commented Apr 3, 2016 at 11:59
I'd rather avoid validation summary as given the number of inputs I have it would makes things harder for the user. — user2488275
– user2488275, Commented Apr 3, 2016 at 12:02

adem caglin · Accepted Answer · 2016-04-03 14:54:53Z

0

I had a similar issue and i used following solution:

Post form data via jquery ajax

$("#save").on("click", function (e) {
      //clear error if exists before
      var $form = $("#saveform");          
      $.post($form.attr("action"), $form.serialize(), function(result) {
         if (result.ok) {
            //handle success
         } else {
            handleError($form, result);
         }
      });
});

Validate data in the server side and send json result to the client(ok or errors).

if (ModelState.IsValid)
{
   return Json(new {ok = true});
}
else
{
   return Json(new {ok = false, errors= ModelState.Values.SelectMany(x => x.Errors)});
}

Handle result in client side(if has any error show in the form and activate tab)

function handleError($form, result) {
    for (var i = 0; i < result.errors.length; i++) {
        var item = result.errors[i];
        for (var j = 0; j < item.MemberNames.length; j++) {
            var input = $form.find("[name=" + item.MemberNames[j] + "]");
            var tab= input.closest(".tab");
            tab.addClass("active");
            //show error(near the input or in summary)
        }
    }
}

answered Apr 3, 2016 at 14:54

adem caglin

24.5k10 gold badges65 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2488275 Over a year ago

I finally got around to trying this and i'm glad to say to it works like a charm although I'd be interested to know how you handled client side validation. When you display server side errors, how did you automatically hide server side validation when a user entered text into the field so that client side validation can take over? One approach is to setup a jquery key and change events that remove the server side validation error span for that input. I am just wondering whether you approach may be cleaner.

Collectives™ on Stack Overflow

ASP.NET MVC handling server side validation on jQuery form wizard/tabs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related