Jquery jqBootstrapValidation在多个选择中至少对两个选项进行验证

我使用的目的是要求用户输入特定类别中的至少两个项目，如果只选择了一个或没有，则会通过ajax提示错误。但是，jqBootstrapValidation不支持多个选择：

---

不必在ajax中硬编码，最短的方法是什么？我找到了一个修复jqBootstrapValidation的多选验证的方法。 我看了看。。。这就是我让它工作的方式

选择的HTML：

职能：

$(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")
    }
  });
});

从中看到它

<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")
    }
  });
});