Clever Geek Handbook

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 html

But how can I make it work with the jQuery UI selectbox plugin?

I hope someone has a working solution. :)

+3


source to share


1 answer


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/

+8


source






More articles:


All Articles