ブートストラップが有効なブートストラップバリデータが選択されていません

Question

入力フィールドと選択メニューが少ないフォームがあります。私は選択メニューのためのブートストラップ選択プラグインを使用しています。 Link このプラグインを使用して、すべての作業を完了し、ブートストラップ検証を適用しました。 Linkと選択メニューを除いて正常に動作しています。

私は選択メニューをクリックして（メニュー項目を選択せず​​に）外側をクリックすると何もしませんでした。通常、境界線の色が変わり、このようなエラーメッセージが表示されます。 "このフィールドを記入してください。"しかし、私がsubmitをクリックすると、正常に動作します。その後、私はブートストラップのselectpickerプラグインを削除しました。それはうまくいった。私は両方のプラグインとの間に矛盾があると思っています。サンプル画像をご覧ください。

をクリックして選択メニューと外をクリックし（動作しない）

クリックしてフォームを提出し、細かい作業。

私はこのコードで試しましたが、運はありませんでした。誰かが選択メニューをクリックしたときにエラーメッセージを表示し、何も選択せずに入力フィールドのように外側をクリックする必要があります。これに最適なソリューションは何ですか？ここで

を例 jsbin

<form data-toggle="validator"> 
    <div class="form-group"> 
     <label for="select" class="control-label">Title</label> 
     <div class="form-input"> 
      <select class="selectpicker form-control" title="Please Select" id="select" name="select" required> 
      <option value=""></option> 
      <option value="1">Mr</option> 
      <option value="2">Mrs</option> 
      <option value="3">Ms</option> 
      <option value="4">Miss</option> 
      <option value="5">Dr</option> 
      </select> 
     <div class="help-block with-errors"></div> 
     </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-primary">Submit</button> 
    </div> 
    </form> 

$('.select').on('hide.bs.select', function () { 
    $(this).trigger("focusout"); 
}); 

Answer 1

であるあなたは、あなたの選択入力にないselectクラスにhide.bs.selectイベントを処理しています。代わりに.selectpickerで試してみてください：ここで

<form data-toggle="validator"> 
    <div class="form-group"> 
     <label for="select" class="control-label">Title</label> 
     <div class="form-input"> 
      <select class="selectpicker form-control" title="Please Select" id="select" name="select" required> 
      <option value=""></option> 
      <option value="1">Mr</option> 
      <option value="2">Mrs</option> 
      <option value="3">Ms</option> 
      <option value="4">Miss</option> 
      <option value="5">Dr</option> 
      </select> 
     <div class="help-block with-errors"></div> 
     </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-primary">Submit</button> 
    </div> 
    </form> 

$('.selectpicker').on('hide.bs.select', function () { 
    $(this).trigger("focusout"); 
}); 

は、あなたが ".selectpicker" を使用する必要がthe updated jsbin

Answer 2

です。

http://formvalidation.io/examples/bootstrap-select/