7

jquery 検証プラグインを使用して、bootstrap-select.js プラグインを使用して美化された選択を検証する問題に直面しています。bootstrap-select.js はクラス selectpicker を想定し、次の 1 行のコードを実行します。

$('.selectpicker').selectpicker();

htmlのselectの美化に。

ただし、jquery 検証プラグインを使用した検証で問題が発生しています。クラスselectpickerが削除されない限り、選択はまったく検証されません。クラスが削除されると、検証が適切に実行されます。以下は、選択用の私のhtmlです。

<select class="input-medium required" id="editCategory_sltCategoryName"
name="editCategory_sltCategoryName">
    <option value="">
        Select Category
    </option>
    <option>
        Reusable Components
    </option>
    <option>
        BU Connects
    </option>
</select>

以下はjsです：

$('#frm_editCategory').validate({
    rules: {
        editCategory_sltbuName: {
            required: true
        },
        editCategory_sltCategoryName: {
            required: true
        },
        editCategory_categoryName: {
            minlength: 2,
            required: true,
            buname: true
        },
        editCategory_categoryDescription: {
            minlength: 2,
            required: true,
            buname: true
        }
    },
    highlight: function(element) {
        $(element).closest('.control-group')
            .removeClass('success').addClass('error');
    },
    success: function(element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group')
            .removeClass('error').addClass('success');
    },
    submitHandler: function(event) {
        return true;
    }
});

カスタムメソッドも書いてやろうとしましたが、役に立ちません。

4

4 に答える 4

20

私は同様の問題に遭遇し、それを解決できたと信じているので、あなたが説明したことに基づいてあなたの質問に答えるために最善を尽くします.

selectまず、メソッドで正しく初期化したと仮定していますselectpicker()。上、あなたが書いた

$('.selectpicker').selectpicker();

selectしかし、あなたはclass を持つ要素を持っていないselectpickerので、あなたが書くつもりだったと思います

$('select').selectpicker();

を呼び出すとselectpicker()、Bootstrap は要素の後に追加の要素 ( div、button、span、ulおよびli) を挿入しますselect。ただし、Bootstrap はhide()元のselect要素になることに注意してください。 あなたselectが隠されているため、JQuery Validate はフォームが送信されたときにその検証を無視します。 これが主な問題です。

非表示の選択入力を無視しないようにJquery Validateに指示するには、次のようにします...

// Initialize form validation rules, submit handler, etc.
$('#frm_editCategory').validate({
  .
  .
  .
});

// The default value for $('#frm_editCategory').validate().settings.ignore
// is ':hidden'.  Log this to the console to verify:
console.log($('#frm_editCategory').validate().settings.ignore);

// Set validator to NOT ignore hidden selects
$('#frm_editCategory').validate().settings.ignore = 
  ':not(select:hidden, input:visible, textarea:visible)';

input:visibleとも含める必要があるのはなぜtextarea:visibleですか? 以前は、非表示の入力をすべて無視する設定でした。無視するだけなら、hidden以外の:not(select:hidden)入力はすべて無視されます。ただし、可視は非表示ではないため、これは許容範囲が広すぎます。したがって、それも無視されます。必要なのは、次の要素を無視することです。selectinput[type=text]select

- is *not* a hidden `select`
- *is* a hidden `input`
- *is* a hidden `textarea`

これをすべて:notセレクターに合わせるには、次の要素を無視する必要があります。

- is *not* a hidden `select`
- is *not* a visible `input`
- is *not* a visible `textarea`

したがって...

$('#frm_editCategory').validate().settings.ignore = 
  ':not(select:hidden, input:visible, textarea:visible)';
于 2013-11-09T06:28:16.903 に答える
2

これが私のために働いた簡単な解決策です：

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

$('select.input-medium').on('change', function () {
    validator.element($(this));
});

それでおしまい

于 2017-01-03T18:48:31.217 に答える