複数選択で少なくとも2つのオプションのjqBootstrapValidation

Question

bootstrap-select私は特定のカテゴリから少なくとも2つのアイテムを入力するように要求しています。しかし、jqBootstrapValidationは、複数のサポートが選択していない：

jsfiddle example

 <select id="food" name="interests" class="form-control selectpicker" multiple data-selected-text-format="count" multiple title="Choose at least 2" required data-validation-required-message="Please enter at least two items."> 
      <option value="apple">apple</option> 
      <option value="banana">banana</option> 
      <option value="orange">orange</option> 
      <option value="lemon">lemon</option> 
      <option value="fig">fig</option> 
     </select> 

この作品を作るための最短の方法だろう何、AJAX

Answer 1

にハードコーディングすることなく、私はへの修正を見つけましたjqBootstrapValidationの複数選択検証。
私はdocumentationを見ました...そして、これは私がそれを働かせる方法です。

selectのためのHTML：

<select id="food" 
      class="form-control selectpicker" 
      multiple title="Choose at least 2" 
      required 
      data-validation-required-message="Required" 
      data-validation-multiple-message="Select at least two fruits."; 
      > 

機能：

$(function() { 

    // Define the select variables to use. 
    var selectID = "#food"; 
    var selectMinimum = 2; 
    var selectedValues = []; 
    var selectSeparator = "-SEP-"; // This separator will be usefull on PHP side 
    // to explode values from $_POST['interests'] 

    // Get the selected values 
    $("#food").on("mouseup",function(){ 
    selectedValues = $(this).val(); 
    selectedValues = selectedValues.join(selectSeparator); 
    $("#interests").val(selectedValues); 
    }); 

    // Custom submit 
    function customSubmit(event){ 
    // Display selections in console. 
    console.log(selectedValues); 

    // Check if there is less selections than selectMinimum in selectID 
    if(selectedValues.length<selectMinimum){ 
     event.preventDefault(); 
     console.log("Missing fruit."); 

     // Do BootStrap's job here... 
     $(selectID).attr("aria-invalid",true).focus(); 
     $(".control-group").removeClass("success").addClass("warning"); 
     $(".help-block").html("<ul role='alert'><li>"+$(selectID).data('validation-multiple-message')+"</li></ul>"); 

     // If more than selectMinimum in selectID 
     // Since only the last selection is sent... 
     // Again, do BootStrap's job! 
    }else{ 
     event.preventDefault(); 

     // Get ALL the form's data 
     var formData = $(".form-horizontal").serialize(); 
     console.log(formData); 

     // Now post it. 
     $.post("#", formData,function(data) { 

     // That is a custom confirm for this CodePen... 
     // You can do better. 
     $("body") 
      .empty() 
      .css({"padding":"10px","text-align":"center"}) 
      .html("<h1>DATA SENT:</h1><i>using jQuery $.post()</i><br><br><h3>"+formData+"</h3>"); 
     }); 
    } 
    } 

    // jqBootstrapValidation initialisation 
    $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation({ 
    preventSubmit: true, 
    submitError: function($form, event, errors){ 
     // Here I do nothing, but you could do something like display 
     // the error messages to the user, log, etc. 
    }, 
    submitSuccess: function($form, event){ 
     customSubmit(event); 
    }, 
    filter: function() { 
     return $(this).is(":visible") 
    } 
    }); 
}); 

はCodePenでそれを参照してください。