validation of multiple selects

Question

validation of multiple selects

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

How do I check if all selects have been selected?

First I check if it is different from select, the user needs to check a different option than "select".

Then I need to check that all selects are different from "select"

While not different from "select" I can not send the form.

My jQuery:

  $('#results-answers').children('select').each(function(){
    if ($(this).val() != "Selecione"){
     $('#results-answer select').removeClass('flagError');
    }
    else{
     $('#results-answers select').addClass('flagError');
     return false;
    }
   });

This is the html with one of the selects (it's currently 5, but it can dynamically vary the amount since it comes from an ajax)

 <div class="" id="results-answers">
  <select class="form-control answers" id="1"> 
  <option>Selecione</option>
  <option value="true" data-question-code="1">Sim</option>
  <option value="false" data-question-code="1">Não</option>
  </select>
 </div>

javascript jquery

asked by anonymous 18.09.2018 / 16:33

2 answers

2

Use the $('select option:selected[value=Selecione]') selector to see if there are any select with this "Select" option selected:

$( "#validar" ).click(function() {
  console.log($('select option:selected[value=Selecione]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 <p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 <p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 
 <button id='validar'>Validar</button>

18.09.2018 / 17:02

Why can I only handle files with pointer? Paste Numbers

score 1 · Accepted Answer

My suggestion is to put an empty% void in every first value :

<option value="">Selecione</option>

In the function that will validate you do not need to loop option . Just check the ones that are empty:

function validar(){
   var resps = $('#results-answers .answers');          // seleciona os selects pela classe
   var erros = resps.find('option:selected[value=""]'); // seleciona os selects com option vazio
   resps.removeClass('flagError');                      // remove a classe de todos
   erros.parent().addClass('flagError');                // adiciona a classe nos vazios

   if(erros.length) return false;                       // se houver um vazio retorna falso
   console.log("envia o formulário!");                  // envia o formulário
}

Example:

function validar(){
   var resps = $('#results-answers .answers');          // seleciona os selects pela classe
   var erros = resps.find('option:selected[value=""]'); // seleciona os selects com option vazio
   resps.removeClass('flagError');                      // remove a classe de todos
   erros.parent().addClass('flagError');                // adiciona a classe nos vazios
   
   if(erros.length) return false;                       // se houver um vazio retorna falso
   console.log("envia o formulário!");                  // envia o formulário
}

.flagError{
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="" id="results-answers">
  <select class="form-control answers" id="1"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="1">Sim</option>
  <option value="false" data-question-code="1">Não</option>
  </select>

  <select class="form-control answers" id="2"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="2">Sim</option>
  <option value="false" data-question-code="2">Não</option>
  </select>

  <select class="form-control answers" id="3"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="3">Sim</option>
  <option value="false" data-question-code="3">Não</option>
  </select>
 </div>
 <button onclick="validar()">Validar</button>