使用验证来指示多个选项卡上的错误答案

【问题标题】：Use validation to indicate errors on multiple tabs使用验证来指示多个选项卡上的错误
【发布时间】：2013-04-25 21:50:51
【问题描述】：

我创建了一个包含多个隐藏部分的表单。选项卡条隐藏/显示部分以创建占用空间较小的页面。虽然这使页面更干净，但在验证后很难向用户显示错误。我想在选项卡中做一个指示器，显示指定选项卡中的内容有错误。

主视图：

    <div>
        <ul class="contentTabs">
            <li onclick="switchTab(this)" class="selected">Contact</li>
            <li onclick="switchTab(this)">Information</li>
            <li onclick="switchTab(this)">Software</li>
            <li onclick="switchTab(this)">Hardware</li>
            <li onclick="switchTab(this)">Classification</li>
            <li onclick="switchTab(this)" class="last">Solution</li>
        </ul>
        <div class="content">
            <div id="contact" class="contentPane">
                @Html.Partial("_Contact")
            </div>
            <div id="information" class="contentPane" style="display: none;">
                @Html.Partial("_Information")
                @Html.Partial("_Notes")
            </div>
            <div id="notes" class="contentPane" style="display: none;">
                @Html.Partial("_Notes")
            </div>
            <div id="software" class="contentPane" style="display: none;">
                @Html.Partial("_Software")
            </div>
            <div id="hardware" class="contentPane" style="display: none;">
                @Html.Partial("_Hardware")
            </div>
            <div id="classification" class="contentPane" style="display: none;">
                @Html.Partial("_Classification")
            </div>
            <div id="solution" class="contentPane" style="display: none;">
                @Html.Partial("_Solution")
            </div>
        </div>
     </div>

部分视图（联系方式）：

@code
Dim notifyTypes As ListItemCollection = DirectCast(ViewData("NotifyTypes"), ListItemCollection)
Dim callerTypes As ListItemCollection = DirectCast(ViewData("CallerTypes"), ListItemCollection)
Dim reportingTypes As ListItemCollection = DirectCast(ViewData("ReportingTypes"), ListItemCollection)
Dim myIncident As Library.BusinessLayer.Incident = DirectCast(Model, Library.BusinessLayer.Incident)
End Code
    <table class="tableBorderless" style="width: 99%; margin: 0px auto">
        <tr>
            <td class="right">User Location</td>
            <td class="left">
                @Html.DropDownList("LocationId", DirectCast(ViewData("Locations"), SelectList), New With {.style = "width: 200px"})<br />
                @Html.ValidationMessage("LocationId", New With {.class = "red"})
            </td>
            <td class="right">Notify</td>
            <td class="left">
                @For Each notificationType As ListItem In notifyTypes
                    @<input type="radio" name="Notify" value="@notificationType.Value" @IIf(notificationType.Selected, "checked", "") />@notificationType.Text
                Next
            </td>
        </tr>
        <tr>
            <td class="right">Caller Type</td>
            <td colspan="3" class="left">
                @For Each callerType As ListItem In callerTypes
                    @<input type="radio" name="CallerType" value="@callerType.Value" @IIf(callerType.Selected, "checked", "") />@callerType.Text
                Next
            </td>
        </tr>
        <tr>
            <td class="right">User Network ID</td>
            <td class="left">
                @Html.TextBox("UserId", myIncident.UserId, New With {.onchange = "UserId_onchange(this)", .maxlength = "30"})
            </td>
            <td class="right">User Name</td>
            <td class="left">
                @Html.TextBox("UserName", myIncident.UserName, New With {.maxlength = "50"})<br />
                @Html.ValidationMessage("UserName", New With{.class = "red"})
            </td>
        </tr>
        <tr>
            <td class="right">User Email</td>
            <td class="left">
                @Html.TextBox("UserEmail", myIncident.UserEmail, New With {.maxlength = "50"})<br />
                @Html.ValidationMessage("UserEmail", New With{.class = "red"})
            </td>
            <td class="right">User Phone</td>
            <td class="left">
                @Html.TextBox("UserPhone", myIncident.UserPhone, New With {.maxlength = "50"})
            </td>
        </tr>
        <tr>
            <td class="right">Reporting Type</td>
            <td colspan="3" class="left">
                @For Each reportingType As ListItem In ReportingTypes
                    @<input type="radio" name="ReportedByType" value="@reportingType.Value" @IIf(reportingType.Selected, "checked", "") />@reportingType.Text
                Next
            </td>
        </tr>
        <tr>
            <td class="right">Reported by (Network ID)</td>
            <td class="left">
                @Html.TextBox("ReportedByUserId", myIncident.ReportedByUserId, New With {.onchange = "ReportedByUserId_onchange(this)", .maxlength = "30"})
            </td>
            <td class="right">Reported by Name</td>
            <td class="left">
                @Html.TextBox("ReportedByName", myIncident.ReportedByName, New With {.maxlength = "50"})<br />
                @Html.ValidationMessage("ReportedByName", New With {.class = "red"})
            </td>
        </tr>
        <tr>
            <td class="right">Reported by Email</td>
            <td class="left">
                @Html.TextBox("ReportedByEmail", myIncident.ReportedByEmail, New With {.maxlength = "50"})<br />
                @Html.ValidationMessage("ReportedByEmail", New With {.class = "red"})
            </td>
            <td class="right">Reported by Phone</td>
            <td class="left">
                @Html.TextBox("ReportedByPhone", myIncident.ReportedByPhone, New With {.maxlength = "50"})
            </td>
        </tr>
    </table>

<script type="text/javascript">
function UserId_onchange(textField) {
    var parms = {UserName: textField.value};

    $.ajax({
        url: '@Url.RouteUrl(New With{.Controller = "Users", .Action = "Get"})',
        type: 'POST',
        dataType: 'json',
        data: parms,
        success: function (data) {
            $("#UserName").val(data.Name);
            $("#UserEmail").val(data.Email);
            $("#UserPhone").val(data.PhoneWork);
        }
    });
}

function ReportedByUserId_onchange(textField) {
    var parms = { UserName: textField.value };

    $.ajax({
        url: '@Url.RouteUrl(New With{.Controller = "Users", .Action = "Get"})',
        type: 'POST',
        dataType: 'json',
        data: parms,
        success: function (data) {
            $("#ReportedByName").val(data.Name);
            $("#ReportedByEmail").val(data.Email);
            $("#ReportedByPhone").val(data.PhoneWork);
        }
    });
}
</script>

【问题讨论】：

标签： asp.net asp.net-mvc-3 validation

【解决方案1】：

您可能需要做的是使用各种验证消息的visibility。

我解决这个问题的方法是向验证消息中添加一个自定义类，以便在 jquery 中使用：

@Html.ValidationMessage("UserName", New With{.class = "red validationMesssage"})

然后在switchTab 函数中执行如下操作：

function switchTab(el)
{
    var tabId=$(el).text();  //Get the tab to be searched
    var isValid=true;  //Set default as valid
    $("#"+tabId).find(".validationMessage:visible").each(function(){
        isValid=false;  //this should only fire if the validation message is visible
    });
    if(!isValid)
        $(el).addClass("errors");  //If invalid..add error class to li element.
}

【讨论】：

【解决方案2】：

您可以检查相应选项卡的 div 是否应用了任何“输入验证错误”类（假设您使用标准 DataAnnotations）。将此组合到 jQuery 函数中，该函数将运行所有需要的 div（可能是 li 元素中指定的所有 div），并且如果具有“input-validation-error”类的元素长度大于 0，正如@rivarolle 建议的那样，应用“error”类to li 元素以您喜欢的方式突出显示它。这将是一个可能的脚本：

$( "li" ).each(function( index ) {
    var searchPattern = ("#"+$(this).text()+" .input-validation-error");
    if ($(searchPattern.toLowerCase()).length > 0){
        $(this).addClass("error");
    }
});

css:

.error {
    background-color: red;
}

【讨论】：

做到了。谢谢sn-p。

【解决方案3】：

我认为，页面应该分为部分视图。在进行下一步之前，需要验证每个局部视图。为此，我们可以编写一个辅助方法。当用户填写数据并发布该部分时，控制器会检查并填写您的自定义验证错误集合，它可以作为模型元数据传递，即模型中的伙伴类。这样，您将呈现错误。即我们正在使用模型元数据来发送验证错误。

如果你不想使用模型方法，那么你需要使用 ViewBag 集合，它是动态集合。

希望这会有所帮助。

【讨论】：

【解决方案4】：

给你的 li 元素 ID

<li onclick="switchTab(this)" id="softwareTab">Software</li>

然后传递验证对象的集合，或者，最好是在您的 ViewModel 中列出受影响的选项卡名称，并将该列表存储在一个或多个隐藏字段中。然后使用 jQuery 解析列表并按照 rivarolle 的建议添加错误类...

$("#softwareTab").addClass("error")

您可能需要稍后使用 removeClass() 进行清理。

有很多方法可以做到这一点，有点笨拙，但有时这是一个好看的页面的价格......一个带有逗号分隔列表的隐藏字段，每个选项卡一个带有布尔值的隐藏字段.. .or 伪布尔值。

【讨论】：

【解决方案5】：

例如，您可以将包含错误的选项卡标题的颜色更改为红色。为此，我会切换

标签。

获取信息选项卡：

No error:
--> <li onclick="switchTab(this)">Information</li>

Error:
--> <li onclick="switchTab(this)" class="error">Information</li>

CSS 类“错误”会将颜色更改为红色或附加图像以指示验证失败。

【讨论】：

是的，那很好，但我需要知道如何捕获选项卡的验证消息。目前，为每个受影响的表单控件显示验证消息。我需要知道如何标记这些部分以显示它们有错误。

【解决方案6】：

您可以在主视图顶部尝试@Html.ValidationSummary(false)。从可用性的角度来看，它也更好。

【讨论】：

好的，请阅读上面的帮助文本。不，这不是我要找的。我创建了一个类来处理我的数据验证。它具有三个属性：字段、验证消息和字段所属的部分。这些对象的集合被返回到我的控制器，所以我知道哪些部分有问题。我只是不知道通过选项卡的格式将该信息传递到视图的好方法。