Question

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

主要观点：

    <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>

Answer 1

您可以检查适当的tab的div是否应用了任何“input-validation-error”类（使用标准DataAnnotations）。将它合并到jQuery函数中，该函数将遍历所有需要的div（可能是你的li元素中指定的所有div），如果具有“input-validation-error”类的元素的长度大于0，则@rivarolle建议应用“error”类以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;
}

Answer 2

提供您的li元素ID

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

然后传递验证对象的集合，或者更好地在ViewModel中列出受影响的选项卡名称，并将列表存储在一个或多个隐藏字段中。然后使用jQuery解析列表并按照rivarolle ...

的建议添加错误类

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

您可能需要稍后使用removeClass（）进行清理。

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

Answer 3

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

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

希望这有帮助。

Answer 4

您可能需要做的是使用各种验证消息的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.
}

Answer 5

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

Answer 6

例如，您可以将包含错误的标签页眉的颜色更改为红色。为此，我将切换

标签的CSS。

点击“信息”标签：

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

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

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

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

6 个答案: