我创建了一个具有多个隐藏部分的表单。选项卡条隐藏/显示各个部分以创建占用空间较小的页面。虽然这使页面更加干净，但在验证后很难向用户显示错误。我想在选项卡中创建一个指示器，显示指定选项卡中的内容有错误。
主视图:
<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>
部分 View (联系人):
@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>
最佳答案
您可以检查相应选项卡的 div 是否应用了任何“输入验证错误”类(假设您使用标准 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;
}
关于asp.net - 使用验证来指示多个选项卡上的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16325930/