Asp.net mvc 3 选择包含验证错误控件的选项卡

我找到了一些接近我想做的事情，但不完全是。 我想找到第一个选项卡，其中有一个控件存在验证错误，并选择该选项卡。 我让JQUERY在带有下一个和上一个链接的选项卡中单击，现在如果我可以直接进入带有验证错误的选项卡，那就太好了

MVC3数据注释正在进行验证。任何建议都很好。注意：我确实缩短了模型和视图代码

我想做的是，当单击按钮提交表单并执行验证时，如果出现任何验证错误，那么我希望选择选项卡列表中的第一个选项卡，并选择具有验证错误的控件

这是视图模型

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>