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

Community
  • 1
  • 1
Ciel
  • 17,312
  • 21
  • 104
  • 199
  • 1
    You may want to check out [Ideal Forms](http://elclanrs.github.com/jq-idealforms/) to save you some headaches. – elclanrs Dec 29 '12 at 21:30
  • This does look really cool, unfortunately I am far enough committed to jQuery UI where I'm not sure I can make a change right now. – Ciel Dec 29 '12 at 21:54

2 Answers2

1

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');
    }
});
Hans Vn
  • 787
  • 1
  • 16
  • 32
  • Hrnm, that did not seem to do it. I changed it from `$('input[type="text"]')` to `$('select')` for one, since I don't have any text boxes - and that stops initially, but then if they reselect the default, it doesn't disable the form input - I tried putting a re-add to the disable in the if clause, but that didn't work either. (changed fiddle here : http://jsfiddle.net/ciel/nvNZt/4/ ) – Ciel Dec 29 '12 at 21:43
  • try to address your select list with the id you gave it: $('#select_list') – Hans Vn Dec 29 '12 at 21:44
  • 1
    sorry, I didn't ad the parentheses after the val: the val is a function so add the parentheses like this: val()... I'm updating my answer, it's working here – Hans Vn Dec 29 '12 at 21:55
  • Yeah, that seems to work. I had to add the if clause still : http://jsfiddle.net/ciel/nvNZt/10/ - that seems a bit cumbersome. I was hoping there was a way to get jQuery Validate to work with it but it seems it has to be manual. – Ciel Dec 29 '12 at 22:02
  • the if clause is indead necessary to add the disabled attribute again... http://jsfiddle.net/hansvn/nvNZt/11/ – Hans Vn Dec 29 '12 at 22:15
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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Yeah, I tried DropKick and found it very frustrating. There is no way to circumvent this problem with jQuery Validation? – Ciel Dec 29 '12 at 21:57
  • I have added an edit part to my answer. This is an easiest solution but you will need to play a bit to make a perfect position for a new select box. – Gajotres Dec 29 '12 at 22:04
  • Youch. I wonder if the jQuery Official Fork can exhibit it any differently... Thanks a ton for the help, I now know the reason for the problem. Is it possible to award credit for both answers? – Ciel Dec 29 '12 at 22:08
  • Give me an up vote and approve Hans answer, you already gave me one approval today. If you have any more questions feel free to contact me through my email (you can find it in my profile). – Gajotres Dec 29 '12 at 22:12
  • 1
    Quick Update : You led me to the perfect solution - working fiddle is here : http://jsfiddle.net/ciel/83nns/13/ --- jQuery Validation has the option to override what it ignores. I found that here : http://blog.waynebrantley.com/2011/01/mvc3-validates-hidden-fields-using.html -- and here : http://stackoverflow.com/questions/9301913/jquery-validate-not-valid-if-the-container-is-hidden – Ciel Dec 29 '12 at 22:21
  • You are awesome. Too bad it is already the 29th or you would be on my christmas list. – Ciel Dec 29 '12 at 22:29
  • Hehehe as I said contact me if you need any more help. – Gajotres Dec 29 '12 at 22:31
  • 1
    I will probably come to you when I get ready to begin implementing the "Unobtrusive" part of this. – Ciel Dec 29 '12 at 22:32
  • No problem m8, I like solving problems. It is a game to me :) – Gajotres Dec 29 '12 at 22:34
  • Hrnm. Is there any way to make it validate on blur? I'm trying to use the onfocusout trick I see for jQuery validate, but it isn't working. I suspect because the actual select list isn't 'blurring'. – Ciel Dec 29 '12 at 23:28
  • If you can add blur event to select box you can execute validator programmaticaly like this: $("#form-id").validate().form(); – Gajotres Dec 30 '12 at 00:09