Unable To Add Class In Input Of Select2 Upon Validation

I am using select2.js. This is the html i am using for my form.

• Solution 1:

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

  <formid="select2Form"method="post"class="form-horizontal"><selectname="colors"class="form-control select2-select"multipledata-placeholder="Choose 2-4 colors"><optionvalue="black">Black</option><optionvalue="blue">Blue</option><optionvalue="green">Green</option><optionvalue="orange">Orange</option><optionvalue="red">Red</option><optionvalue="yellow">Yellow</option><optionvalue="white">White</option></select></form>

  And the js to validate :

  $('#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 optionsvar options = validator.getFieldElements('colors').val();
                              return (options != null && options.length >= 2 && options.length <= 4);
                          }
                      }
                  }
              }
          }
      });
  

Share