Question

在我的网络应用程序中，我们使用了twitter-bootstrap主题。我必须在我的应用程序中为一个表单进行客户端验证。表单包括文本字段，复选框和多选下拉列表。我可以验证文本字段和复选框，但我不能验证下拉列表。

 <select id="users" name="username[]"  class="chzn-select span2" multiple="multiple">  
     <option value="sdfsd">sdfsdfs</option>
           .... 
   </select>

但在运行时，select标签是隐藏的，它们会生成<li>个标签。我不能使用document.getElementByID（）;

请向我提供进行验证的最佳方式。

Answer 1

试试这个

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>

脚本

$('#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

Answer 2

//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;
}

HTML：JS：BOOTSTRAP;验证多选下拉列表

2 个答案: