JQuery UI Select combined with validation plugin
I want to check my selectboxes, but since I am using jQuery UI to style my selectboxes it doesn't work.
JQuery UI set real selectbox on display: no, so it doesn't work: see
But how can I make it work with the jQuery UI selectbox plugin?
I hope someone has a working solution. :)
It only happens because of what is selectMenu
hiding select
. By default, validation does not validate hidden items. You can change this by setting the parameter ignore
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 can see, the change selectMenu
does not re- validate the input. You can work around this by clicking on the event change
on selectMenu
and re-checking 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/