1

私のフォームには、性別を選択するためのラジオ ボタンが 2 つあります。

このプラグインを検証に使用しています。ラジオ ボタンに検証を適用すると、このプラグインは 2 つのラジオ ボタンの間にエラー ラベルを配置します。

ここにフィドルがあります：http://jsfiddle.net/wyFQp/1/

HTML:

<head>
    <body>
        <form id='registration_form'>
            <input type="radio" value="M" name="gender" class="gender" id="genderm"
            />Male
            <input type="radio" value="F" name="gender" class="gender ml_10" id="genderf"
             />Female
            <input type='submit' />
        </form>
    </body>

両方のラジオ ボタンの後にエラー ラベルを配置するにはどうすればよいですか? または、少なくともまともな場所で？

4

1 に答える 1

4

エラーを表示するマークアップにエラー ラベルを追加します。

<label class="error" generated="true" for="gender" style="display:none;"></label>

フィドル

これをラジオ入力に関連付けると、エラー ラベルのfor属性がラジオに対応します。nameこれにより、同じ名前のラジオは、一度に 1 つのラジオしか選択されず、グループに関連付けられた 1 つのエラー ラベルしか持たないため、作業が容易になります。
ただし、テキスト入力 (およびselect/ textarea/ type="checkbox") の場合は、idを使用する必要があります。

もう 1 つのハック的ではない方法はerrorPlacement、エラー コンテナーでオプションを使用することです。たとえば、次のようになります。

<div id="genderErrorContainer"></div>

$("#registration_form").validate({
    rules: {[...]},
    messages: {[...]},
    submitHandler: fn,
    errorPlacement: function(error, element) {
        if (element.prop('name') === 'gender') {
            error.appendTo('#genderErrorContainer');
        }
    }
});

更新されたフィドル

もちろん、他の DOM 操作メソッドを使用してエラー要素を DOM に追加することもでき.appendます。構造。.prepend.afterinsertAfter.before.insertBeforeelement

于 2013-01-22T20:59:40.923 に答える