asp.net - 使用验证来指示多个选项卡上的错误

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>

score 2 · Accepted Answer

您可以检查相应选项卡的 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;
}

score 1 · Accepted Answer

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

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

希望这可以帮助。

score 1 · Accepted Answer

给你的 li 元素 ID

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

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

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

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

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

score 1 · Accepted Answer

您可能需要做的是使用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.
}

score 0 · Accepted Answer

You could change the color of the tab headers that contain errors to red for instance. To do this, I would switch the css of the

tags.

To take the Information tab:

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

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

The CSS class "error" will change the color to red or append an image to indicate validation failure.

score 0 · Accepted Answer

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

asp.net - 使用验证来指示多个选项卡上的错误

6 回答 6

Related

Reference