Question

I have to build a registration form using asp.net mvc 3 jquery validate.
That form is composed of approx 20 fields splitted in 3 JS tabs due to UI and navigation style.
I wrote all my validation on the serverside through annotations in the profile model:

namespace Web.Models
{
public class ProfileModel
{

    //companyName
    [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyNameRequired")]
    [StringLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyNameLong")]
    [Display(Name = "CompanyName_label")]
    public string companyName { get; set; }

    //companyAddress
    [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyAddressRequired")]
    [StringLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyAddressLong")]
    [Display(Name = "CompanyAddress_label")]
    public string companyAddress { get; set; }

    //companyCity
    [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyCityRequired")]
    [StringLength(50, ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyCityLong")]
    [Display(Name = "CompanyCity_label")]
    public string companyCity { get; set; }

    //companyZip
    [Required(ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyZipRequired")]
    [StringLength(10, ErrorMessageResourceType = typeof(Core.Resources.Resources),
        ErrorMessageResourceName = "CompanyZipLong")]
    [Display(Name = "CompanyZip_label")]
    public string companyZip { get; set; }

... and so on for a toltal 20 fields ...

My validation labels are in our Core->Resources localized files, the profile controller is coded to catch HTTPPOST and my view looks like this:

@model Web.Models.ProfileModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.ValidationSummary(true)

@using (Html.BeginForm("Register", "Profile", FormMethod.Post, new { id = "RegForm" }))
{

    <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Company</a></li>
        <li><a href="#tabs-2">User</a></li>
        <li><a href="#tabs-3">Address</a></li>
    </ul>

        <fieldset>

        <div id="tabs-1"> 

        <div class="editor-label">
            @Html.LabelFor(model => model.companyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.companyName)
            @Html.ValidationMessageFor(model => model.companyName)
        </div>
    ... here other fields ...

    </div>
    <div id="tabs-2">

        <div class="editor-label">
            @Html.LabelFor(model => model.userFName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.userFName)
            @Html.ValidationMessageFor(model => model.userFName)
        </div>
    ... here other fields ...

As you can see I use a single ProfileModel with all fields defined, a single “big” form splitted over 3 tabs (Company, User, Address).
Now I have to put a NEXT button at the bottom of first tab, a PREV and NEXT buttons at the bottom of second tab, a finally a PREV and SUBMIT button at the bottom of third and last tab.

My question is how to implement Client side scripting to prevent the user skips to tab2 even if tab1 is not validated (partial validation).
So I need to browse throught tabs only if the previous are correctly validated.
Any idea?

Answer 1

You would start with the concepts in Eagerly Performing ASP.NET MVC 3 Unobtrusive Client Side Validation but modify it to use work with your next button clicks.

Specifically it centers around using .valid() against the form which contains elements with validation attributes which I’ve copied below in case the article ever disappears.

<script type="text/javascript">
          $(document).ready(function () {
                    $('input','form').blur(function () {
                              $(this).valid();
                    });
          });
</script>