asp.net-mvc-3 - ASP.NETMVC3の目立たない検証とラジオボタン

Question

ラジオボタンのリストで必要な検証を実行して、ユーザーに続行するオプションを選択させるようにしています。検証は機能しますが、最初のラジオボタンでのみメタデータを出力し、最初のラジオボタンにクラスinput-validation-errorのマークを付けるだけです。

例：

<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionOne)</p>
<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionTwo)</p>

結果のHTML：

<p><input class="input-validation-error" data-val="true" data-val-required="required text" type="radio" name="Choices" value="OptionOne" /></p>
<p><input type="radio" name="Choices" value="OptionTwo" /></p>

両方のラジオボタンで検証エラークラスを取得する必要があります。そうしないと、ユーザーが選択するオプションが歪む可能性があります。

私に何ができる？

score 7 · Accepted Answer

次のコードの予想される動作に注意してください

@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionOne)
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionTwo)
@Html.RadioButtonFor(x => x.MyEnumProperty, MyEnum.OptionThree)

は

<input id="MyEnumeration" type="radio" value="Option1" 
       name="MyEnumeration" 
       data-val-required="The MyEnumeration field is required." data-val="true">
<input id="MyEnumeration" type="radio" value="Option2" name="MyEnumeration">
<input id="MyEnumeration" type="radio" value="Option3" name="MyEnumeration">

なんで？Html.SomethingFor(model => model.Property)1 つの特定のプロパティに対して 1 つの html 要素を生成することを意図しているためです。これを使用して 1 つのプロパティから複数の要素を作成する方法は正しくありません。

さらに、これら 3 つのラジオボタンの ID を確認します。彼らはかなり同じですよね？HTML ページに同じ ID を持つ要素を含めることは許容されますか? 絶対違う！したがって、何かを修正する必要があります。

この問題は、新しい Html 拡張メソッド (参考文献 2) を開発することで簡単に解決できると思いましたが、別の方法で解決しようとしました (頑固なので)。

まず、かみそりのコードを変更する必要があります。

<div>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option1, new { id = "m1" })
    <label for="m1">
        OPTION 1</label>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option2, new { id = "m2" })
    <label for="m2">
        OPTION 2</label>
    @Html.RadioButtonFor(m => m.MyEnumeration, MyEnum.Option3, new { id = "m3" })
    <label for="m3">
        OPTION 3</label>
</div>

次に、問題を解決するための JavaScript/jQuery マジックの一部:

<script type="text/javascript">
    $(function () {
        $('[name=MyEnumeration]').each(function (index) { domAttrModified(this); });
    });

    function domAttrModified(obj) {
        //$obj = $(obj);
        $(obj).bind('DOMAttrModified', function () {
            if ($(obj).attr('class').indexOf('input-validation-error') != -1)
                $(obj).parent().addClass('input-validation-error');
            else
                $(obj).parent().removeClass('input-validation-error');
        });
    }
</script>

最初のラジオボタンで検証エラーが発生するたびに、この JavaScript コードはinput-validation-error、要素であるラジオボタンの親要素にエラー css クラス ( ) を適用します<div>。

また、(ラジオボタン要素のいずれかをクリックして) 検証エラーがなくなると、親要素からエラースタイルが削除されます。

IE と FF では問題なく動作しますが、残念ながら Chrome では動作しません。DOMAttrModified理由は、Chrome がイベントをサポートしていないためです。このソリューションを使用して修正できます: https://stackoverflow.com/a/10466236/538387ですが、後で可能性があります。

繰り返しますが、HTML 拡張メソッドを開発するか、次のような EditorTemplate を改善して使用する必要があると思います: https://gist.github.com/973482

参考文献:

score 4 · Accepted Answer

これは、showErrorsコールバックを使用して実行できます。

$("form").data("validator").settings.showErrors = function (errorMap, errorList) {
    this.defaultShowErrors();

    $("input[type=radio][data-val=true].input-validation-error").each(function () {
        $("input[name=" + $(this).attr('name') + "]").addClass("input-validation-error");
    });

    $("input[type=radio][data-val=true]:not(.input-validation-error)").each(function () {
        $("input[name=" + $(this).attr('name') + "]").removeClass("input-validation-error");
    });
};

score -1 · Accepted Answer

私がしたことは、ラジオボタンの css を無効にして、エラーメッセージのみを表示することでした。（IEがこれを気に入っているかどうかはわかりません）

.input-validation-error input[type="radio"]
{
    border: 0x solid #ff0000;
    background-color: inherit;
}

asp.net-mvc-3 - ASP.NETMVC3の目立たない検証とラジオボタン

3 に答える 3

Related

Reference