验证后无法在select2的输入中添加类 [英] Unable to add class in input of select2 upon validation

问题描述

我正在使用select2.js.

I am using select2.js.

这是我用于表单的html.

This is the html i am using for my form.

<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的输入中.

Upon validation class="error" is added to the select of the above html but not added to the input of the select2 .

请帮助！！！

这是演示

推荐答案

此处是以下示例在JS中使用select2验证进行表单验证.

Here is an exemple of form validation with select2 validating in JS.

    <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);
                        }
                    }
                }
            }
        }
    });

这篇关于验证后无法在select2的输入中添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！