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.

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.

• javascript
• html
• validation
• twitter-bootstrap

Share Improve this question Follow edited Dec 5, 2013 at 16:09 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Dec 5, 2013 at 10:11 user3069614user3069614 6322 silver badges55 bronze badges 1

• Please do not use jquery-validate tag when the question has noting to do with this plugin. Edited. Thanks. – Sparky Commented Dec 5, 2013 at 16:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

//You can use Js for this
    var ptype=document.getElementById('username').options[document.getElementById('username').selectIndex].value;

if(ptype=""){
document.getElementById('username').style.display='none';
alert('Please select field');
document.getElementById('username').focus();
return false;
}