jqBootstrapValidation for at least two options in multiple select

Question

I am using bootstrap-select in order to require the user to input at least two items from a specific category and gets prompted through ajax with the error if only one selected or none. However, jqBootstrapValidation does not have support for multiple select:

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>

What would be the shortest way to make this work, without having to hardcode in ajax

Louys Patrice Bessette · Answer 1 · 2017-06-02T09:58:16.110

I found a fix to the multiple selection validation of jqBootstrapValidation.
I looked at the documentation... And this is how I'v made it working.

The HTML for 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.";
          >

The functions:

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

See it in CodePen.

jqBootstrapValidation for at least two options in multiple select

1 Answers1