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 に「input-validation-error」クラスが適用されているかどうかを確認できます (標準の DataAnnotations を使用した場合)。@rivarolleが提案したように、必要なすべてのdiv（おそらくli要素で指定されたすべてのdiv）を実行するjQuery関数にこれを結合し、「input-validation-error」クラスの要素の長さが0より大きい場合は、「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;
}

score 1 · Accepted Answer

あなたのli要素IDを与えてください

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

次に、検証オブジェクトのコレクション、または影響を受けるタブ名のリストを ViewModel に渡し、そのリストを 1 つ以上の非表示フィールドに保存します。次に、jQuery を使用してリストを解析し、rivarolle の提案に従ってエラークラスを追加します。

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

後で removeClass() を使用してクリーンアップする必要がある場合があります。

これを行うには多くの方法がありますが、すべて少し不器用ですが、見栄えの良いページの代償になる場合もあります...カンマ区切りのリストを持つ1つの非表示フィールド、ブール値を持つタブごとに1つの非表示フィールド...または疑似-ブール値。

score 0 · Accepted Answer

たとえば、エラーを含むタブヘッダーの色を赤に変更できます。これを行うには、のcssを切り替えます

タグ。

[情報] タブを表示するには:

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

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

CSS クラス「エラー」は、色を赤に変更するか、画像を追加して検証の失敗を示します。

asp.net - 検証を使用して複数のタブでエラーを示す

6 に答える 6

Related

Reference