jqBootstrap验证至少有两个选项在多个选择

我使用bootstrap-select为了要求用户输入至少两个项目从一个特定的类别，并得到提示通过ajax与错误，如果只有一个选择或没有。然而，jqBootstrapValidation不具备多点选择：jqBootstrap验证至少有两个选项在多个选择

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>

什么是最短的方式来完成这项工作，而不必在阿贾克斯硬编码

来源

2017-02-01 Maleka

我找到了解决的jqBootstrapValidation的多选择验证。
我看着documentation ......这就是我让它工作的方式。

的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-02 08:57:44

jqBootstrap验证至少有两个选项在多个选择

回答

相关问题