jQuery UI Select in combination with the Validation Plugin

drop-down-menu, jquery, jquery-ui, jquery-validate, select

Solution

This is just due to the fact that `selectMenu` hides the `select`. By default, validate does not validate hidden elements. You can change this by setting the `ignore` option to `[]`:

$(".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);
    }
});

As you noticed, changing the `selectMenu` does not re-validate the input. You can get around this by tapping into the `change` event on the `selectMenu` and re-validating the element manually:

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

Example: http://jsfiddle.net/8YvSN/

Problem

I want to validate my selectboxes but because i use jQuery UI to style my selectboxes it is not working. Jquery UI is set the real selectbox on display : none so that is why it not work see: But how can i make it work with the jQuery UI selectbox plugin? I hope somewone has a working solution. :)

Original source