0

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

jsfiddle 示例

        <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 中硬编码

4

1 回答 1

0

我找到了 jqBootstrapValidation 的多项选择验证的修复程序。
我查看了文档......这就是我让它工作的方式。

的 HTML select：

<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中查看。

于 2017-06-02T08:57:44.183 回答