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

【问题标题】：How to validate Bootstrap + chosen plugin with jQuery php如何使用 jQuery php 验证 Bootstrap + 选择的插件
【发布时间】：2018-04-03 10:17:44
【问题描述】：

我已经为可用产品制作了一个类别列表。我正在为多选下拉选项使用 bootstrap + 选择插件。我想要的是用户在提交表单时至少选择一个选项。我的意思是每当提交表格时，类别列表不应为空。根据我的同事的说法，它应该在 php 中完成，但我已经为 multiSelect 下拉菜单使用了第三方插件，所以 jQuery 或 php 无关紧要。任何帮助将不胜感激。

我试过了

我的引导代码和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>

【问题讨论】：

标签： php jquery twitter-bootstrap validation jquery-chosen

【解决方案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>

【讨论】：

试试这个是用ajax写的。这是非常简单的长度 3：错误