asp.net-mvc-3 - 検証エラーのあるコントロールを含むタブを選択

Question

ここでやりたいことに近いものを見つけましたが、正確ではありません。検証エラーのあるコントロールを持つ最初のタブを見つけて、そのタブを選択したいと考えています。次のリンクと前のリンクを含むタブをクリックするようにJQUERYが機能していますが、検証エラーのあるタブにたどり着くことができれば、それは素晴らしいことです。

MVC3 DataAnnotations が検証を行っています。どんな提案も素晴らしいでしょう。注: モデルとビューのコードを短くしました。

私がしたいのは、ボタンをクリックしてフォームを「送信」し、検証エラーが発生した場合に検証が実行され、検証エラーのあるコントロールを持つタブのリストの最初のタブが必要になることです選択されました。

これがビューモデルです。

public class RegistrationViewModel
{
    [Required(ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "Required")]
    [StringLength(50, ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "StringLength")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [StringLength(100, ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "StringLength")]
    [Display(Name = "Street")]
    public string Street1 { get; set; }

    public IEnumerable<SelectListItem> SecurityQuestionOneList { get; set; }

    [Required(ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "Required")]
    [Remote("DistinctSecurityQuestionOne", "Validation", AdditionalFields = "SecurityQuestionTwo, SecurityQuestionThree", ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "DistinctSecurityQuestions")]
    public string SecurityQuestionOne { get; set; }

    [Required(ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "Required")]
    [StringLength(200, ErrorMessageResourceType = typeof(ValidationMessages), ErrorMessageResourceName = "StringLength")]
    public string SecurityQuestionOneAnswer { get; set; }
}

これが私の見解にあるコードです。

@model SteadyPayCustomer.Models.RegistrationViewModel
@using Resources;

@{
    ViewBag.Title = "Register";
}

<h2>Create a New Account</h2>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var $tabs = $('#tabs').tabs();

        $(".ui-tab-panel").each(function (i) {
            var totalTabs = $(".ui-tab-panel").size() - 1;

            if (i != totalTabs) {
                next = i + 2;
                $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Step &#187;</a>");
            }

            if (i != 0) {
                previous = i;
                $(this).append("<a href='#' class='previous-tab mover' rel='" + previous + "'>&#171; Previous Step</a>");
            }
        });

        $(".next-tab, .previous-tab").click(function () {
            $tabs.tabs('select', $(this).attr("rel"));
            return false;
        });
    });
</script>

<div id="tabs">
    <ul id="tabstyle">
        <li><a href="#fragment-1"><span style="color:#000000;font-weight:bold;font-size:12px">User</span></a></li>
        <li><a href="#fragment-2"><span style="color:#000000;font-weight:bold;font-size:12px">Contact</span></a></li>
        <li><a href="#fragment-3"><span style="color:#000000;font-weight:bold;font-size:12px">Security</span></a></li>
    </ul>

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)

        <div id="fragment-1" class="ui-tab-panel">
            <fieldset>
                <legend>User Information</legend>

                <div class="editor-label">
                    @Html.Label(UserViewText.FirstNameLabel)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.FirstName)
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>
            </fieldset>
        </div>
        <div id="fragment-2" class="ui-tab-panel">
            <fieldset>
                <legend>Customer Information</legend>

                <div class="editor-label">
                    @Html.Label(CustomerGeneralViewText.Street1Label)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Street1)
                    @Html.ValidationMessageFor(model => model.Street1)
                </div>
            </fieldset>
        </div>
        <div id="fragment-3" class="ui-tab-panel">
            <fieldset>
                <legend>Security Questions</legend>

                <div class="editor-label">
                    @Html.Label(SecurityQuestionsViewText.SecurityQuestionOneLabel)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.SecurityQuestionOne, Model.SecurityQuestionOneList, string.Empty, Model.SecurityQuestionOne)
                    @Html.ValidationMessageFor(model => model.SecurityQuestionOne)
                </div>

                <div class="editor-label">
                    @Html.Label(SecurityQuestionsViewText.SecurityQuestionOneAnswerLabel)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.SecurityQuestionOneAnswer)
                    @Html.ValidationMessageFor(model => model.SecurityQuestionOneAnswer)
                </div>

                <p>
                    <input type="submit" value="@General.FinishButtonText" />
                </p>
            </fieldset>
        </div>
    }
</div>