如何验证 Bootstrap + 使用 jQuery php 选择的插件

Question

我已经制作了可用产品的类别列表。我正在为 multiSelect 下拉选项使用 bootstrap + choosen 插件。我想要的是用户在 he/she 提交表单时 select 至少有 1 个选项。我的意思是无论何时提交表单，类别列表都不应该是空白的。根据我的同事的说法，它应该在 php 中完成，但我已经为 multiSelect 下拉列表使用了第三方插件，所以 jQuery 或 php 没关系。任何帮助将不胜感激。

我试过了

我的bootstrap代码和php验证码：

<select multiple class="chosen-select" data-placeholder="Select Your Category" name="category">
  <option>Product a</option>
  <option>Product b</option>
  <option>Product c</option>
  <option>Product d</option>
  <option>Product e</option>
  <option>Product f</option>
  <option>Product g</option>
  <?php
    foreach ($catlist as $category) {
      if (isset($_POST["category"]) && $_POST["category"] == $category)
        echo "<option selected='selected' value='$category'>$category</option>";
      else
        echo "<option value='$category'>$category</option>";
    }
  ?>
</select>

//define $categorylist here

$catlist = array (
  "Product a",
  "Product b",
  "Product c",
  "Product d"
  "Product e"
  "Product f"
  "Product g"
);

我也试过 jQuery

<script>
  $(document).ready(function(){
    $('.chosen-select').chosen({
      width: "100%",
      min_selected_options:1,
      max_selected_options:3
    });
  });
</script>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="#" method="post" id="form">
    <p id="message"></p>
    <select multiple class="chosen-select" data-placeholder="Select Your Category" id="category" name="category[]">
        <option>Product a</option>
        <option>Product b</option>
        <option>Product c</option>
        <option>Product d</option>
        <option>Product e</option>
        <option>Product f</option>
        <option>Product g</option>
    </select>
    <button type="submit">submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
    $('#form').on('submit', function (e) {
        // console.log('errors');
        e.preventDefault();
        var selectData = $('#category').val();
        // console.log(selectData);

        if (selectData.length< 1 || selectData.length> 3) {
            $('#message').html('error').css({'color':'red'});
            return;
        }

        $.ajax({
            type: 'post',
            url:$(location).attr('href'),
            data: selectData,
            success: function (data) {
                $('#message').html('success').css({'color':'green'});

            }
        });
    });
</script>
</body>
</html>

如何验证 Bootstrap + 使用 jQuery php 选择的插件

How to validate Bootstrap + chosen plugin with jQuery php

php

validation

jquery

twitter-bootstrap

jquery-chosen