1

入力が ASP.NET MVC で検証エラーをスローしたときに、その入力の境界線を別の色に変更しようとしています。私が知る限り、私はそれを正しく行っていますが、残念ながら機能しません。これは主に CSS に関する質問ですが、関連するすべての情報をプロセスに投稿しました。

まず、ビューのコード スニペット:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="form_settings">
        <fieldset>
            <legend>Create New Log</legend>
            <table id="error-organizer">
                <tr class="transparent">
                    <td class="transparent">
                        Employee
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent">@Html.EditorFor(model => model.Requestor)
                    </td>
                    <td class="transparent">@Html.ValidationMessageFor(model => model.Requestor)
                    </td>
                </tr>

カスタムデータ注釈を使用して、コントローラーではなくモデルでこれを検証しています。期待どおりにブラウザーにエラー メッセージが表示されるため、これが機能することはわかっています。

この入力用の 2 つの CSS スタイルを次に示します。

#error-organizer input .input-validation-error
{
    border: 3px solid #cc0; 
}

.form_settings input, .form_settings textarea, .form_settings select { 
  padding: 5px; 
  margin: 0 0 8px 8px;
  width: 150px; 
  font: 100% arial; 
  border: 1px solid #6F6147; 
  background: #EFF8FB; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;  
}

最初のスタイルは、エラーが発生したときに適用する必要があるものです。2 番目のスタイルは、現在優先されているデフォルトのスタイルです。ただし、最初のスタイルから .input-validation-error を削除すると、常に 2 番目のスタイルが上書きされることに注意してください。

最後に、Web サイトのビュー ソースの関連部分を次に示します (エラーが発生した後)。

<form action="/QCLogs/Create" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>    <div class="form_settings">
        <fieldset>
            <legend>Create New Log</legend>
            <table id="error-organizer">
                <tr class="transparent">
                    <td class="transparent">
                        Employee
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent"><input class="input-validation-error text-box single-line" data-val="true" data-val-number="The field Requestor must be a number." data-val-range="The field Requestor must be between 1 and 9999." data-val-range-max="9999" data-val-range-min="1" data-val-required="The Requestor field is required." id="Requestor" name="Requestor" type="number" value="1234" />
                    </td>
                    <td class="transparent"><span class="field-validation-error" data-valmsg-for="Requestor" data-valmsg-replace="true">Invalid employee number.</span>
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent">
                        Type
                    </td>
                    <td class="transparent">
                    </td>
                </tr>

動作から、CSS スタイルは、ビュー ソースにあると表示されているにもかかわらず、.input-validation-error クラスに応答していないように見えます。ただし、私は CSS マスターでもないので、見落としている単純なものであることを願っています。

ご協力いただきありがとうございます。

4

1 に答える 1

3

との間にスペースがinputあります.input-validation-error。それはそれを不正確にします。代わりにこれを試してください：

#error-organizer input.input-validation-error
于 2013-04-30T21:11:33.310 に答える