Select2 Validation

Select2 validation on submit

To enable the validation of select2 inputs on form Submission add the following to your javascript after requiring rails.validations

ClientSideValidations.selectors.validate_inputs += ', .select2-container:visible + :enabled[data-validate]';
ClientSideValidations.selectors.inputs += ', .select2-container:visible + :enabled[data-validate]';

It is just validation after form submission. Simple but not "live".

Possible implementation complete Select2 integration

Full live (client side) validation, "developed" to use with simple_form and foundation markup (should work in other cases too).

Create separate .coffee file e.g. client_side_select2.js.coffee with following code:

    # Add select2 support
    ClientSideValidations.selectors.validate_inputs += ', select[data-validate]'
    ClientSideValidations.selectors.inputs += ', .select2-container'

    getSelect2 = (element) ->
      $(element).parent().find('select')

    $.fn.base = window.ClientSideValidations.enablers.input

    window.ClientSideValidations.enablers.input = (element) ->
      extend = ->
        unless $(element).hasClass 'select2-container'
          $.fn.base(element)
        else
          $placeholder = $(element)
          $select = $placeholder.parent().find('select')
          form   = $select[0].form
          $form  = $(form)

          if $select.attr('data-validate')
            # only focus event should be handled by placeholder
            $placeholder.on(event, binding) for event, binding of {
              'focusout.ClientSideValidations': ->
                getSelect2(@).isValid(form.ClientSideValidations.settings.validators)
            }
            $select.on(event, binding) for event, binding of {
              'change.ClientSideValidations':   -> getSelect2(@).data('changed', true)
              # Callbacks
              'element:validate:after.ClientSideValidations':  (eventData) -> ClientSideValidations.callbacks.element.after(getSelect2(@),  eventData)
              'element:validate:before.ClientSideValidations': (eventData) -> ClientSideValidations.callbacks.element.before(getSelect2(@), eventData)
              'element:validate:fail.ClientSideValidations':   (eventData, message) ->
                element = $(@)
                ClientSideValidations.callbacks.element.fail(element, message, ->
                  form.ClientSideValidations.addError(element, message)
                , eventData)
              'element:validate:pass.ClientSideValidations':   (eventData) ->
                element = $(@)
                ClientSideValidations.callbacks.element.pass(element, ->
                  form.ClientSideValidations.removeError(element)
                , eventData)
            }
      extend()

Require this file after rails.validations in your appplication.js.coffee e.g.:

    #= require rails.validations
    #= require client_side_select2

Now add data-validate="true" attribute to your select2 select element to get the following markup:

    <select data-select2-select="true" data-validate="true" style="display: none;">
      <option value="">Default option</option>
      <option value="1">Option 1</option>
      ... other options ...
    </select>

    <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 291px;">
    ... rest of the select2 markup ...
    </span>

Now everything should work.

Good luck.

I suppose that support for select2 without validation might be an issue with the code above, but I'm not sure.