1

Tenho um formulário usando o step wizard conforme o link abaixo:

https://bootsnipp.com/snippets/j6rkb

Ele funciona corretamente, porém vi que a validação de campos só funciona para campos input. Como eu poderia fazer para validar também campos combobox? Vejam abaixo o jquery dele:

<script>
$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-success').addClass('btn-default');
            $item.addClass('btn-success');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-success').trigger('click');
});
</script>

O select seria esse:

<select name="Estado" class="form-control" required="required">
   <option value="">Selecione</option>
   <option value="RJ">Rio de Janeiro</option>
   <option value="SP">São Paulo</option>
</select>

O código completo encontra-se no link que passei acima, pois estou copiando fielmente conforme desenvolvido pelo autor.

10
  • Quando você fala combobox está se referindo a um select né? Commented 15/09/2018 às 16:32
  • Olá João, isso... é um select simples do Bootstrap.
    – user24136
    Commented 15/09/2018 às 16:33
  • Corrigi o título com meu post ;)
    – user24136
    Commented 15/09/2018 às 16:33
  • 1
    Fox, caso alguma resposta tenha resolvido o seu problema você pode marcar como aceita clicando no V verdinho do lado dos pontos da escolhida. Ou, caso queira, pode deixar em aberto mais um tempo se deseja mais alternativas, mas é bom que depois de resolvida você marque alguma para fechar o assunto. Saiba mais em "Como e por que aceitar uma resposta". Commented 16/09/2018 às 14:53
  • 1
    Olá João. Feito ;) Obrigado!
    – user24136
    Commented 16/09/2018 às 21:18

2 Respostas 2

1

Para validar os campos de um select você tem duas opções (que eu conheço).

A primeira delas é utilizando um required dentro da tag do select (o que você já está fazendo).

<form id="form">
  <select name="Estado" class="form-control" required="required">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <input type="submit" />
</form>

Lembrando que o required não é suportado pelo Safari (os outros é normal, só o Edge e o IE que é somente a partir da versão 10).

Caso queira fazer algo mais personalizado você poderá fazer de outra maneira. Veja o exemplo:

$('#estado').on('change', function(){
    $('#resultado').text(!!this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <select name="Estado" class="form-control" id="estado">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <div id="resultado"></div>
</form>

A partir disso você poderia fazer uma personalização no estilo do formulário que está implementando. Veja:

$('#estado').on('change', function() {
  if (this.value == false) {
    this.classList.add('error');
  } else {
    this.classList.remove('error');
  }
});
.error {
  border: 2px solid #a94442;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <select name="Estado" class="form-control" id="estado">
    <option value="">Selecione</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="SP">São Paulo</option>
  </select>
  <div id="resultado"></div>
</form>

Lembrando que nos exemplos eu usei um pouco de JavaScript "puro" e em partes com jQuery. Mas, você poderia fazer tudo somente com jQuery, mudariam poucas coisas.

3
0

Form validation with jQuery

    $(document).ready(function () {

        $("#meuForm").validate({
            rules: {
                Estado: {
                    required: true
                }
            },
            messages: {
    Estado: "Selecione uma opção"
    
  },        
     submitHandler: function (form) { // para demo
                console.log('validado');
                return false;
            }
        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

<form id="meuForm">
  <select name="Estado" class="form-control" required="required">
        <option value="">Selecione</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="SP">São Paulo</option>
  </select>
        <br/>
        <input type="submit" value="Validar"/>
    </form>

1
  • Obrigado a todos!
    – user24136
    Commented 16/09/2018 às 21:18

Você deve fazer log-in para responder a esta pergunta.