如何在视图模型中仅使用一个属性验证选项卡插件中的多个文本框

Question

我有两个标签。在每个标签中，我都有一个带验证的文本框。

@model WebApplication2.Models.MyViewModel

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

<style>
    .tabs li {
        list-style: none;
        display: inline;
    }

    .tabs a {
        padding: 5px 10px;
        display: inline-block;
        background: #666;
        color: #fff;
        text-decoration: none;
    }

        .tabs a.active {
            background: #fff;
            color: #000;
        }
</style>


@using (Html.BeginForm())
{

    <ul class='tabs'>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
    </ul>
    <div id='tab1'>
        <h3>Section 1</h3>
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>
    <div id='tab2'>
        <h3>Section 2</h3>
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </div>
    <input type="submit" value="Submit" />
}

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function () {
            $('ul.tabs').each(function () {
                // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links, use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                $active.addClass('active');
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function (e) {
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });
    </script>
}

这是为两个标签呈现的内容：

<div id="tab1">
    <h3>Section 1</h3>
    <input data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="">
    <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>
<div id="tab2" style="display: none;">
    <h3>Section 2</h3>
    <input id="FirstName" name="FirstName" type="text" value="">
    <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>

区别在于这两个：

data-val="true" data-val-required="The FirstName field is required."

视图模型：

public class MyViewModel
{
    [Required]
    public string FirstName { get; set; }

}

我想要做的是对两个文本框进行独立验证。也就是说，当用户点击第一个标签时，我希望能够在第一个标签中验证文本框，如果用户点击第二个标签，我想在第二个标签中验证文本框。

如何在viewmodel类中只使用一个属性？想象一下有50个标签。我不想在我的viewmodel类中拥有50个属性。