Validate fields with selects (Combobox)

Question

I have the code below that generates amount of rooms in my selects.

 str += '<select class="select-group" id="selQuartos">';
 str += '<option>Qtd. quartos</option>';

 for (var i = 1; i < $("#Quartos").val() + 1; i++) {

     if (i == 1) str += '<option>' + i + ' quarto</option>';
     else str += '<option>' + i + ' quartos</option>';

     if (i == $("#Quartos").val()) break;
 }

 str += '</select>';

I have this javascript function that validates whether there are checkboxes checked or not. I would like to add in this validation, if there are selected rooms in my combos above, but I’m not able to do it. Checkboxes we got the values checked and ready. Now how to do with Combos? I tried so: if($("selQuartos").val() < 1)... This didn’t work because I can’t bring the value of the Selector(Combobox). Below javascript to validate:

 function Submit() {
     var Apartmento = [];
     var retorno = false;
     for (var i = 0; i < filtroPesquisa.chkApartmento.length; i++) {
         if (filtroPesquisa.chkApartmento[i].checked) {
             Apartmento.push(filtroPesquisa.chkApartmento[i].value);
         }
     }
     if (Apartmento.length == 0) {
         for (var i = 0; i < filtroPesquisa.chkApartmento.length; i++) {
             filtroPesquisa.chkApartmento[i].style.color = "red";;
         }
         retorno = false;
     } else {
         retorno = true;
     }

So I got to do as FS.DEV posted. If I comment the for and give false Return, it does not go to another page, but if I leave the same with false Return, it goes to another page. As it calls another page, I can’t catch if there is a javascript error or not. Here’s how I’m doing it. I put Return false only for testing.

function Submit() {

    var _selSeguro = document.getElementById('selSeguro');
    var _selIngresso = document.getElementById('selIngresso');
    var _selPasseio = document.getElementById('selPasseio');

    var selecionados = new Array();
    for(var i = 0; i <_selIngresso.length; i++)
        if(_selIngresso[i].selected)
            selecionados.push({'id':i,'valor':_selIngresso.value});


        return false;

    }

I noticed something important here. When the page enters, the sliders are closed. When I open a slider it presents me the buttons and combos to fill. With the sliders open, the button to navigate the other page obeys the function’s Return. This just doesn’t happen when the sliders are closed. Does anyone know why?

I made this form and it didn’t work.

if ((_selIngresso.value == '') && (_selPasseio.value == '') && (_selSeguro.value == ''))
        return false;

If I do one by one, it works, but they all don’t, because when I open a slider, the denals close and this validation only happens when the sliders are open. Does anyone have any idea how to do this?

I spoke slider, but now I saw that it is called ACCORDION the effects, IE, when one opens the other closes. When it is closed I can no longer catch anything on it, nothing at all. Then it gives javascript error and the button calls the page.

Answer 1

It is not very clear what you asked, what I understood and what you want to know if you are selected or in a select, if that is you can do as follows... I will use the pure javascript, if necessary make the adaptations.

The first would be as follows. Replace the the line

str += '<option>Qtd. quartos</option>';

for

str += "<option value=''>Qtd. quartos</option>";

and make the following validation:

<script>
 var sel = document.getElementById('selQuartos');
 if(sel.value == '')
  alert('Campo com valor inválido');

 //A outra forma seria a seguinte, que suporta select multiplos
 var selecionados = new Array();
 for(var i=0; i<sel.length; i++)
  if(sel[i].selected)
   selecionados.push({'id':i,'valor':sel.value});

 if(selecionados.length > 0){
  alert("Existe(m) selecionado(s)");
  alert("Primeiro valor: Posição, "+selecionados[0].id+", valor: "+selecionados[0].value)
 }else{
  alert("Nenhum Selecionado")
 }
</script>