4

UI に Twitter Bootstrap を使用しており、Web フォームで jQuery 検証を使用しようとしています。一部のフォームでは、「btn-group」を使用して入力を提供していますが、次の HTML で jQuery 検証を使用する方法に苦労しています。

<div class="btn-group" id="divSaleType" data-toggle="buttons-radio" required="required" name="divSaleType">
   <button name="New" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnNew" type="button">New</button>
   <button name="Used" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnUsed" type="button">Used</button>
</div>

ボタンが選択されると、「アクティブな」クラスが選択されたボタンに追加されるため、それが私が探している「検証」になります。これに似たアプローチを使用することを考えました:クラスに基づく jQuery カスタム検証- 「アクティブな」クラスもあるが、そのようなイベントをトリガーする方法がわからない「SaleTypeToggle」アイテムを検索します。

どんな助けでも大歓迎です、ありがとう！

4

2 に答える 2

3

私は同じ問題に直面しました。ボタンを検証できないのは事実ですが、回避策を見つけることができました。

完全な例を含む JSFiddle を投稿しました: http://jsfiddle.net/geekman/W38RG/17/

私の解決策は次のとおりです。

  • ボタンが押されるたびにその隠しフィールドの値を設定するために、単純なjQueryとともに隠し要素を使用しました（注：効果がないため、divSaleTypeから必須属性を削除しました）。

    <div class="btn-group" id="divSaleType" data-toggle="buttons-radio" name="divSaleType">
    <button name="New" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnNew" type="button" value="new">New</button>
    <button name="Used" class="btn btn-info SaleTypeToggle" id="ContentPlaceHolder1_ContentPlaceHolder1_btnUsed" type="button" value="used">Used</button>
</div>
<input required type="hidden" name="SaleType" id="SaleType" />

<script type="text/javascript">
    //Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn.
    $('#divSaleType').on('click', '.btn', function () {
        $('#SaleType').val($(this).val());
    });
</script>

  • 次に、非表示フィールドを必須要素として設定します。また、グループ内の各ボタンにvalue属性を追加します。これは、非表示フィールドの値を設定するものです。

  • 最後に、隠しフィールド (デフォルト) を無視しないように jQuery 検証プラグインにオプションを渡しました。これを行うには、空の配列を渡すだけです。

    $('#sales-form').validate({
    ignore: []
});

私にとっては、これでボタン グループが十分に検証されます。さらに、送信時に Web サーバーに POST される HTML 入力を持つという付加価値が得られます。これは、どちらの方法でもボタン グループで何らかの方法で処理する必要がありました。

于 2013-10-07T17:21:25.430 に答える
2

jQuery Validate プラグインは、フォームの入力要素を使用して入力されたデータの検証のみを目的としています。<button></button>要素はデータ入力要素ではありません...アクションをトリガーするためのものであるため、フォーム検証の一部になるものではありません。

つまり、このプラグインは、これらの要素を使用して入力されたユーザー データのみを検証します...

<!-- single line text input, example... -->
<input type="text" />

<!-- radio select -->
<input type="radio" />

<!-- checkbox select -->
<input type="checkbox" />

<!-- pulldown/menu select -->
<select>
    <option></option>
</select>

<!-- multi-line text input -->
<textarea></textarea>

jQuery Validate プラグインが動作するには、それぞれに一意の属性が含まれている必要があり、一連のタグ内に含まnameれている必要があります。<form></form>

于 2013-08-19T23:30:52.830 に答える