多个选择中至少两个选项的jqBootstrapValidation

Question

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

小提琴手例子

        <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的多重选择验证的修正。

我看了文档..。我就是这么做的。

用于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中看到了它。