Add jQuery validationrule for multi-select

Question

In my ASP.NET MVC application I have a View with a select-tag with the ability to select multiple options.

By default (when the page loads) I have no options in the select. From some action the select can be populated with options and this works fine.

Now when I submit the form I want to check if the select has any options or not, as it is required that the select has at least one option when the form is submitted. I don't want to check whether any options are selected or not, just if the select has any options. This is what I've got so far:

<select multiple="multiple" style="width:200px;" id="PersonnelClasses"
                name="PersonnelClasses"></select>

And the jQuery-code:

$("#PersonnelClasses").rules("add", {
    required: true
});

Now, what will the rule look like to check if the select has any items in its list? I haven't found any solution here on SO, nor in the jQuery docs.

Update:

Code for adding options to the select:

this.addPersonnelClass = function () {
        $('#selectablePersonnelClasses :selected').
          each(function (value, item) {
            $('#PersonnelClasses')
              .append($('<option></option>')
              .val(item.value) 
              .html(item.text));
    });
};

Your question is quite vague based on your code. Is that really how your select tag looks like? What about your controller and the rest of your view. Is there something that dynamically adds more options to the select? — gideon
– gideon, Commented Mar 8, 2012 at 11:06
That is exactly what my select-tag looks like. I don't think any other code matters. In my controller I just get the form-data through a FormCollection. The rest of the View (except for the submitbutton) consists of second select and a button to add the items to the first select. This happens with some jQuery code but has nothing to do with the validation... — Abbas
– Abbas, Commented Mar 8, 2012 at 11:11
Check my updated question for that code. But I still don't see what this has to do with the validation? — Abbas
– Abbas, Commented Mar 8, 2012 at 11:14

Jozzeh · Accepted Answer · 2012-03-08 14:25:34Z

1

As i understand it, the page is loaded, the user clicks on a couple of things and then the select is dynamically filled with options. What you want is to get the number of options after it gets updated.

have a look at following code :

<html>
<head>
     <script src="js/jquery.js" type="text/javascript"></script>
      <script type="text/javascript">
            function checkLength(){
                alert($('#PersonnelClasses option').length);
            }
      </script>
</head>
<body>
<form NAME="myform" ACTION="" METHOD="GET">
    <select multiple="multiple" style="width:200px;" id="PersonnelClasses" name="PersonnelClasses">
        <option>bla</option>
        <option>lala</option>
        <option>lolo</option>
        <option>l4</option>
    </select>
    <input type="button" name="mysubmit"  onClick="checkLength()" value="Click" />
</form>
</body>
</html>

this example checks the amount of options in the select each time you click the button. (this click is the action taking place after the webpage has loaded and the user has populated the select)
Do not place the function in the document.ready function (otherwise the function is not found)

answered Mar 8, 2012 at 14:25

Jozzeh

84110 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abbas Over a year ago

This is not what I was initially looking for, I was looking for jQuery validation rules, but I tweaked your solution to get it to work in another jQuery function. So your workaround is good enough.. :)

Collectives™ on Stack Overflow

Add jQuery validationrule for multi-select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related