javascript - 验证后无法在 select2 的输入中添加类

Question

我正在使用 select2.js。

这是我用于表单的 html。

<div class="form-main">
  <ul style="display: block;" class="form-content">
    <li>
      <h2><span class="orange-text">1.</span> tell us your email</h2>
    </li>
    <li class="form-group">
      <input type="text" name="email" placeholder="Type it in here" data-required="true" data-toggle="tooltip" data-placement="left" data-email="true" class="form-control">
    </li>
  </ul>

  <ul style="display: none;" class="form-content">
    <li>
      <h2><span class="orange-text">2.</span>what are you selling?</h2></li>
    <li class="form-group">
      <select data-required="true" data-toggle="tooltip" data-placement="left" name="option" class="js-selection" multiple data-placeholder="Pick the ones that apply to you">
        <option value="" selected></option>
        <option value="1">Shipping / post</option>
        <option value="2">Customers can collect</option>
        <option value="3">Other</option>
      </select>
    </li>
  </ul>
</div>

验证后 class="error" 被添加到上述 html 的选择中，但未添加到 select2 的输入中。

请帮忙!!!!

这是 demo

Answer 1

Here是在 JS 中使用 select2 验证的表单验证示例。

    <form id="select2Form" method="post" class="form-horizontal">
        <select name="colors" class="form-control select2-select"
            multiple data-placeholder="Choose 2-4 colors">
            <option value="black">Black</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="orange">Orange</option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="white">White</option>
        </select>
    </form>

以及要验证的 js:

$('#select2Form')
    .find('[name="colors"]')
        .select2()
        // Revalidate the color when it is changed
        .change(function(e) {
            $('#select2Form').formValidation('revalidateField', 'colors');
        })
        .end()
    .formValidation({
        framework: 'bootstrap',
        excluded: ':disabled',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            colors: {
                validators: {
                    callback: {
                        message: 'Please choose 2-4 color you like most',
                        callback: function(value, validator, $field) {
                            // Get the selected options
                            var options = validator.getFieldElements('colors').val();
                            return (options != null && options.length >= 2 && options.length <= 4);
                        }
                    }
                }
            }
        }
    });