JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/languages/jquery.validationEngine-en.js"></script>
<link rel="stylesheet" href="http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css">
<form id="testform" style="border:1px solid black; margin:2em; padding:1em;">
    <label for="normalselect">Normal select</label>
<select class="validate[required]" id="normalselect" >
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
    <br/><br/>
    <input type="submit" value="Submit" />
</form>

JavaScript

$(document).ready(function() {
    $("#source").select2({
        closeOnSelect: false,
        formatResult: format,
        formatSelection: format,
        blurOnChange: true
    });
    $('#testform').validationEngine({ prettySelect: true, usePrefix: 's2id_', autoPositionUpdate: true });
});


function format(state) {
    // Update: Made it work by changing "state.element" to $(state.element). 
    var originalOption = $(state.element);
    return originalOption.data('foo') + " " + state.text;
}