Bootstrap 3 + Chosen + jquery validate

by Simon Hartley

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<form>
    <div class="form-group">
        <label for="id_tipo_equipo" class="control-label">Tipo</label>
        <select name="id_tipo_equipo" id="id_tipo_equipo" class="form-control chosen" data-placeholder="[Tipo]" required>							            <option value=""></option>
            <option value="1" >Access Point</option>
            <option value="2" >Adaptador</option>
            <option value="3" >Adaptador DVI a VGA</option>
            <option value="4" >Adaptador Electrico para Discos</option>
            <option value="5" >Aire Acondicionado</option>
            <option value="6" >Amplificador</option>
            <option value="7" >Antena</option>
            <option value="8" >Antena Poe</option>
            <option value="9" >Bases de Monitor</option>
            <option value="10" >Bluetooth</option>
            <option value="11" >Cable de Poder</option>
            <option value="12" >Cable USB</option>
            <option value="13" >Cable UTP</option>
            <option value="14" >Cables Conectores</option>
            <option value="15" >Camara de Fotos</option>        
            <option value="16" >Camara de Video</option>
        </select>
    </div>
    <div class="form-group">
        <button class="btn btn-success" type="submit">Validate!</button>
    </div>
</form>

CSS

select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}
 
select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}
 
select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;
 
}
 
select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}
 
select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}
 
select.form-control + .chosen-container .chosen-results li ,...

JavaScript

$('.chosen').chosen({
    no_results_text: "No hemos encontrado resultados!",
	allow_single_deselect: true
});
$.validator.setDefaults({ ignore: ":hidden:not(select)" });
	$('form').validate({
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});