jQuery Validation on Select List themed with jQuery UI SelectMenu Plugin

Question

This is a followup to another question; First I needed to get the validation working on a normal select list. (The first part is available here)

I have a select menu that has some jQuery Validation logic on it. I am using ASP.NET MVC, so there are some custom attributes - but right now I just want the validation to work, so the attributes are not important.

I managed to get that to work (actually, Gajotres solved it, not me.)

Now I want to extend it into the jQuery UI selectmenu plug (plugin is still unofficial - slated for official release in the next version of jQuery UI, but you can find it here : jQuery UI Select Menu (Unofficial)

I have managed to get the styling to work, but now validation fails again. I am posting my code, and a fiddle here. Please note there is more than the code posted here, just for brevity.

jsFiddle (with Plugin)

jsFiddle (without Plugin [properly working])

---

Expected Behavior

The user must not be able to submit the form while the "Default" option is the currently selected value in the select menu.

---

Here is a link to all relevant files in case you just don't want to try the fiddle for some reason.

jQuery

• http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css
• http://code.jquery.com/ui/1.9.2/jquery-ui.js

jQuery Validation Plugin

• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js

Select Menu (forked)

• http://ciel.github.com/jquery-ui/javascripts/jquery.ui.selectmenu.js
• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

Javascript

$(document).ready(function() { 

    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')},  
        },
        messages: {  
            select_list : { valueNotEquals: $('#select_list').attr('data-val-required') }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });

    $("#select_list").selectmenu();
});​

HTML

<form id="form1" action="">
    <select id="select_list" name="select_list">
            <option value="default">Choose...</option>
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input type="submit" id="submit" value="Submit" />
</form>​

CSS

        body {
            font-size: 62.5%;
            font-family: "Verdana",sans-serif;
        }

        fieldset {
            border: 0;
        }

        label, select, .ui-select-menu {
            float: left;
            margin-right: 10px;
        }

        select {
            width: 200px;
        }

        .wrap ul.ui-selectmenu-menu-popup li a {
            font-weight: bold;
}

​Additional CSS to theme the select menu is found in the selectmenu.css file, available here

• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

Answer 1

I know what is a problem with your new implementation. I got the same problem myself.

Validate plugin can not validate elements with css display: none. And for this plugin to work original select must be hidden below the custom one.

Here's an example I made to demonstrate this:

http://jsfiddle.net/Gajotres/64aKZ/

You should comment/uncomment this css bloc to se the difference:

    #select_list {
         display: block !important;
    }

Now from what I could see this plugin was not created to cover the old select box (no matter if original display was block or none). If you don't mind take a look at a plugin I am suing. It will cover old select box even if its display is set to block:

http://jamielottering.github.com/DropKick/

EDIT :

There's another solution. You will need to play with css. Set this to select box:

    #select_list {
         display: block !important;
         visibility: hidden;
    }

Now you will need to cover old select box with new one, or at least float new one to the left.

Answer 2

You can add this piece of code to your jQuery:

//set the submit button disabled
$('input[type="submit"]').attr('disabled','disabled');

//trigger a check of the value when the selectbox is changed
$('#select_list').change(function(){
    if($(this).val() != 'default'){
       $('input[type="submit"]').removeAttr('disabled');
    }
});