Colorize field select option Chosen

Question

I have a select option field and would like the user to click submit, the system color the field

When inspecting the element with Chrome I realized that Chosen put a style display: None and if you take it out it works, but that’s not what I want:

The object is if it is empty when you click the button, select option turn red

Following example:

var setores = [
            "Almoxarifado",
            "Controladoria",
            "Administrativo",
            "Tecnologia de Informação" 
  ];
 
 var i = 0;
 setores.forEach(function(item){
    i++;
    addOption(i, item);
});

function addOption(i, valor) {
    var option = new Option(valor, i );
    var select = document.getElementById("cmb-setor");
    select.add(option);
}

$('#cmb-setor').trigger("chosen:updated");
  
$('.btn-save').on('click', function(){
   var id = $('#cmb-setor').val();
   console.log("Setor: "+id);
   if( id == 0 ){
     $('select[id="cmb-setor"]').css("border-color","red");
  //   $('select[id="cmb-setor"]').css({"border-color":"red", "display":"block"});
   } 
});
 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" rel="stylesheet"/>

<div class="form-group">
   <select class=" form-control" id="cmb-setor" data-placeholder="Escolha um setor">
       <option value="0"></option>
   </select>
</div> 

<button class="btn btn-primary btn-save">Salvar</button>


<script>
   $('#cmb-setor').chosen( {allow_single_deselect: true} );
</script>

Answer 1

You’re trying to change the edge of the select whereas the Chosen concealed the select and creates a div in place, then you must change the edge of the div, for this we will create a style required.

Instead of trying to change the edge of the select:

$('select[id="cmb-setor"]').css("border-color","red");

Altere da div which was created by Chosen:

// div[class='chosen-container-single']
$('div.chosen-container-single').addClass('required');

Create a style in CSS:

.required .chosen-single {
    border: 1px solid #EE0000 !important;
}

Look how it turned out

var setores = [
            "Almoxarifado",
            "Controladoria",
            "Administrativo",
            "Tecnologia de Informação" 
  ];
 
 var i = 0;
 setores.forEach(function(item){
    i++;
    addOption(i, item);
});

function addOption(i, valor) {
    var option = new Option(valor, i );
    var select = document.getElementById("cmb-setor");
    select.add(option);
}

$(document).ready(function(){
  $('#cmb-setor').trigger("chosen:updated");
  $('#cmb-setor').chosen({
    allow_single_deselect: true
  });
  
  $('.btn-save').on('click', function(){
    var id = $('#cmb-setor').val();
    console.log("Setor: "+id);
    if( id == 0 ){
      // Adiciona a classe "required" na div atraves do seletor "class"
      $('div.chosen-container-single').addClass('required');
    } else {
      // Remove a classe "required" na div atraves do seletor "class"
      $('div.chosen-container-single').removeClass('required');
    }
  });
});

.required .chosen-single {
    border: 1px solid #EE0000 !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" rel="stylesheet"/>

<div class="form-group">
   <select class=" form-control" id="cmb-setor" data-placeholder="Escolha um setor">
       <option value="0"></option>
   </select>
</div> 

<button class="btn btn-primary btn-save">Salvar</button>