Home/ Questions/Q 9050801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T12:44:41+00:00

This is a followup to another question; First I needed to get the validation

  • 0

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

jQuery Validation Plugin

Select Menu (forked)

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0