1

我发现了一些接近我想在这里做的事情，但不完全是。我想找到具有验证错误的控件的第一个选项卡并选择该选项卡。我让 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>
4

0 回答 0