7

jquery-validate を使用して複数選択を検証でき、デモとしてフィドルを作成しました。Ctrl キーを押しながら選択を解除し、選択をクリックして効果を確認します。

<form id="myform">
    <select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple">
    <option value="1">Hotel 3 Star</option>
    <option selected="selected" value="2">Hotel 4 Star</option>
    </select>
</form>

$(document).ready(function() {
    var validator = $('#myform').validate({
          // options
          rules: {
            "deals-1-sales_item": "required",            
        },

        //ignore: ':hidden:not("#id_deals-1-sales_item")'                                      
    });
});

しかし、複数選択を選択するとすぐに機能しなくなります。 fiddleを参照してください。

$('#id_deals-1-sales_item').chosen();

調査中に、誰かが選択した代わりにこれを試したことがわかりました。jquery multiselectjquery validate で非表示の要素が無視されているようです。私はその解決策を適用しようとしましたが、Chosen にはさまざまな方法があるため、スタックしました (複数選択は選択されていません)。

ここに私を正しい方向に向けることができるjQueryの達人はいますか? また、フィールド名ではなく、クラスに基づいたソリューションが必要です。このような：

これは私が途中で思いついた解決策です。しかし、続行する方法がわかりません???。

$.validator.addMethod("needsSelection", function(value, element) {
        return $(element).???.length > 0;
    });

var validator = $('#myform').validate({
});

$('#myform').find('select.multi_select_mandatory').each(function(){
        $(this).change(function(){
            $(this).valid();
        });
        $(this).rules('add', {
            needsSelection: ""
        });
    });

解決：

以下のeictoのソリューションを使用すると、フィールド名ベースのソリューションではなく、クラスベースのソリューションを作成できました。これは、サーバーに何も送信せずに即座に検証したい動的要素がある場合に特に便利です。

    var validator = $('#deal_modal_form').validate({
        // options
        ignore: ':hidden:not(.chzn-done)'
     });

    $('#myform').find('select.multi_select_mandatory').each(function(){
    $(this).chosen().change(function(){
        $(this).valid();
    });
    $(this).rules('add', {
        required: true,
    });
});
4

2 に答える 2

4

これは私のために働く：

$(document).ready(function() {
    var validator = $('#myform').validate({
        // options
        rules: {
            "deals-1-sales_item": "required",
        },

        ignore: ':hidden:not(.chzn-done)'
    });
    var checkerrors = function() {
        validator.form();
    };
    var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors);
});​

アイデアは、変更のたびにフォームを手動でチェックすることです。

デモ

于 2012-12-23T20:59:50.443 に答える
0

@eicto と @kave の両方のソリューションを使用して、次のようにソリューションを作成しました。

 $.validator.addMethod("multiSelectRequired", function (value, element) {
    return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
    $(this).change(function () {
        $(this).valid();
    });

    $(this).rules('add', {
        'multiSelectRequired': true
    });
});

プラグインを初期化するときに、検証からの非表示の入力を無視しないように、`ignoe:[] を追加します。

チェックボックスの選択をレンダリングするために、bootstrap-multiselect というブートストラップ プロジェクト用の特別なプラグインを使用しています - https://github.com/davidstutz/bootstrap-multiselcet

于 2013-11-28T05:45:12.243 に答える