HTML:JS:BOOTSTRAP ; validate the multiselect dropdown

html, javascript, twitter-bootstrap, validation

Solution

Try this

HTML

<form action="#">
<select id="users" name="username[]"  class="chzn-select span2" multiple="multiple"> 
      <option value=""></option>  
     <option value="sdfsd">sdfsdfs</option>
           .... 
</select>
<input type="submit" id="add_btn">
</form>

Script

$('#add_btn').on('click', function(e) {
        if($('#users').val() == null && $('#users_chosen').is(':visible')) {
        alert('You must choose division');
        }

});

DEMO

OR

$(function(){
    $('form').submit(function(){
         var options = $('#users > option:selected');
         if(options.length == 0){
             alert('no value selected');
             return false;
         }
    });
});

DEMO

Problem

In my web application we have used the twitter-bootstrap theme. I have to do client side validation for one form in my application. The form includes text fields,checkboxs and multiselect dropdowns. I can validate textfield and checkboxes but i cant validate the dropdown. ``` <select id="users" name="username[]" class="chzn-select span2" multiple="multiple"> <option value="sdfsd">sdfsdfs</option> .... </select> ``` But during runtime the select tag is hide and they generate `<li>` tags. I cant use document.getElementByID(); Please provide me the best way to do the validation.

Original source