JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.ui.select.js"></script>
<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.validate.min.js"></script>
<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.metadata.js"></script>
<link rel="stylesheet" href="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/css/forms.css">
<form action="" class="valid">
    <div class="row">
        <label>Normal input</label>
        <div class="right"><input type="text" value="" name="name" class="{validate:{required:true, messages:{required:'Please enter your name'}}}" /></div>
    </div>
    <div class="row">
        <label>Email</label>
        <div class="right"><input type="text" value="" name="email" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address'}}}" /></div>
    </div>
    <div class="row">
        <label>Normal selectmenu</label>
        <div class="right">
            <select class="required">
                <option value="">The selected one.</option>
                <option value="1">Option number 1</option>
                <option value="2">Option number 2</option>
                <option value="3">Option number 3</option>
                <option value="4">Option number 4</option>
                <option value="5">Option number 5</option>
            </select>
        </div>
    </div>
    <div class="row">
        <label>Textarea</label>
        <div class="right"><textarea rows="8" cols="" name="message" class="{validate:{required:true, messages:{required:'Please enter a message'}}}"></textarea></div>
    </div>
    <div class="row">
        <label>Buttons</label>
        <div class="right">
            <button type="submit"><span>Click me</span></button>
        </div>
    </div>
</form>

JavaScript

// FORM VALIDATION
$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please, check at least one box.');

var checkboxes = $('.right .require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$(".valid").validate({
    meta: "validate",
    ignore: [],
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.attr("type") == "checkbox") error.insertAfter(element.parent().siblings().last());
        else if (element.is("select")) {
            error.insertAfter(element.next("a.ui-selectmenu"))
        }
        else error.insertAfter(element);
    }
});

// SELECTBOXES
$(function() {
    $('.dataTables_length input, select').not("select.multiple").selectmenu({
        style: 'dropdown',
        transferClasses: true,
        width: null,
        change: function() {
            $(".valid").validate().element(this);
}
    });
});