0

Boa tarde, possuo um formulário onde construí uma função para validar campos não preenchidos. Porém quando começo a preencher alguns campos e deixo alguns vazios e clico no botão de enviar ele da submit mesmo assim.

HTML:

                <div class="form-group col-md-4">
                <label>Fabricante:</label>
                <select class="form-control mensalidade required">
                        <option selected="selected" disabled="disabled">Selecione Algo</option>
                        <option value="1">algo</option>
                </select>
            </div>
            <div class="form-group col-md-4">
              <label for="inputNome">Produto:</label>
              <input type="text"  placeholder="Produto" id="produto" class="form-control required" >
            </div>
            <div class="form-group col-md-4">
                <label>Modelo:</label>
                <input type="text" placeholder="Modelo" id="modelo" class="form-control required">
            </div>
            <div class="form-group col-md-4">
              <label for="inputNome">Número de serie:</label>
                <input type="text"  placeholder="Numero de serie" id="numeroserie" class="form-control required">
            </div>
            <div class="form-group col-md-4">
              <label for="inputNome">Tensão:</label>
                <select class="form-control mensalidade required" id="tensao" required="">
                    <option selected="selected" disabled="disabled">Selecione a Tensão</option>
                    <option value="1">110</option>
                    <option value="2">220</option>
                    <option value="3">Bivolt</option>
                </select>
            </div>
            <div class="form-group col-md-4">
              <label for="inputNome">Versão:</label>
                <input type="text"  placeholder="Versão do produto (se houver)" id="versao" class="form-control required">
            </div>
           <div class="form-group col-md-12">
              <label>Descrição:</label>
              <textarea placeholder="Escreva uma descrição do problema" rows="3"  class="form-control required"></textarea>
            </div>
            <div class="box-footer col-md-12">
                <button class="btn btn-warning" type="button" onclick="validarCampos()">Abrir OS</button>
            </div>

Javascript

        function validarCampos(){
        var retorno;
        $(".required").each(function() {
                if($(this).val() === '' || $(this).val() === null){
                    $(this).closest(".form-group").addClass("has-error");
                    retorno = false;
                } else {
                    $(this).closest(".form-group").removeClass("has-error");
                    retorno = true;
                }
            }); 
    if(retorno){
          document.forms[0].submit();
       }
    }
2
  • Seria somente validar se o campo está preenchido ou não? Se sim, basta utilizar o atributo 'required' do HTML.
    – Leandro
    Commented 21/06/2017 às 18:02
  • é que queria soltar uma mensagem de erro por isso que é este atributo não é funcional para mim. Commented 21/06/2017 às 18:03

4 Respostas 4

0

O seu problema é apenas o fato de estar colocando o retorno = true no else. Da forma que você fez, se o último item com a classe .required for possuir algum valor, o valor de retorno será true, e seu form será executado.

Para contornar isso, você pode setar o valor inicial de retorno = true e caso algum campo esteja em branco, você altera o valor para false, e remover o retorno = true; do else, desta forma:

function validarCampos() {
  var retorno = true;
  $(".required").each(function() {
    if ($(this).val() === '' || $(this).val() === null) {
      $(this).closest(".form-group").addClass("has-error");
      retorno = false;
      console.log($(this).val())
    } else {
      $(this).closest(".form-group").removeClass("has-error");
    }
  });
  if (retorno) {
    document.forms[0].submit();
  }
}
.has-error {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-4">
  <label>Fabricante:</label>
  <select class="form-control mensalidade required">
                        <option selected="selected" disabled="disabled">Selecione Algo</option>
                        <option value="1">algo</option>
                </select>
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Produto:</label>
  <input type="text" placeholder="Produto" id="produto" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label>Modelo:</label>
  <input type="text" placeholder="Modelo" id="modelo" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Número de serie:</label>
  <input type="text" placeholder="Numero de serie" id="numeroserie" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Tensão:</label>
  <select class="form-control mensalidade required" id="tensao" required="">
                    <option selected="selected" disabled="disabled">Selecione a Tensão</option>
                    <option value="1">110</option>
                    <option value="2">220</option>
                    <option value="3">Bivolt</option>
                </select>
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Versão:</label>
  <input type="text" placeholder="Versão do produto (se houver)" id="versao" class="form-control required">
</div>
<div class="form-group col-md-12">
  <label>Descrição:</label>
  <textarea placeholder="Escreva uma descrição do problema" rows="3" class="form-control required"></textarea>
</div>
<div class="box-footer col-md-12">
  <button class="btn btn-warning" type="button" onclick="validarCampos()">Abrir OS</button>
</div>

2
  • 1
    Existem algumas formas de melhorar a sua função, mas como não era o foco da pergunta, não modifiquei.
    – Randrade
    Commented 21/06/2017 às 18:16
  • 1
    Na verdade ainda há algumas coisas que irei incluir. Mas verifiquei e o lance do retorno funcionou perfeitamente! Commented 21/06/2017 às 18:17
0

Há uma resolução mais fácil para essa situação, como usar o required nas options do componente, parecido com isso:

<input type="text" placeholder="Modelo" id="modelo" class="form-control" required="required">

Tente colocar required="required" nos inputs que você não quer que fiquem vazios.

1
  • Necessito desta função pois irei soltar mensagens de erro tipo um toastr "Campos não preenchidos". Commented 21/06/2017 às 18:05
0

Seja qual for sua intenção com isso, não se esqueça que qualquer validação ao lado do cliente pode ser facilmente burlada. Valide ao lado do servidor, juntamente.

Há um plugin chamado jQuery Validation que pode ser útil para seu caso. Acesse a página oficial do plugin, onde você encontrará uma documentação. Aqui você encontra alguns exemplos de como este plugin funciona.

1
  • Isso ja está sendo feito. Daniel, muito obrigado pela recomendação. Vou verificar o plugin. Commented 21/06/2017 às 18:21
0

Segue uma maneira de verificar os campos em branco e alertar os que estiverem em branco:

jQuery(function($){
   $("#validar").click(function(){
       var valor = "";
       var id = ""; 
       $("#cadastro .required").each(function(){
          valor = $(this).val(); 
          if (valor == ""){
             id = $(this).attr('id');
             alert ("Campo "+id+" não preenchdo!");
          }
       });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form id="cadastro">

<div class="form-group col-md-4">
  <label>Fabricante:</label>
  <select id="fabricante" class="form-control mensalidade required">
      <option selected="selected" value="">Selecione Algo</option>
      <option value="1">algo</option>
   </select>
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Produto:</label>
  <input type="text" placeholder="Produto" id="produto" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label>Modelo:</label>
  <input type="text" placeholder="Modelo" id="modelo" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Número de serie:</label>
  <input type="text" placeholder="Numero de serie" id="numeroserie" class="form-control required">
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Tensão:</label>
  <select class="form-control mensalidade required" id="tensao" required="">
                    <option selected="selected" disabled="disabled">Selecione a Tensão</option>
                    <option value="1">110</option>
                    <option value="2">220</option>
                    <option value="3">Bivolt</option>
                </select>
</div>
<div class="form-group col-md-4">
  <label for="inputNome">Versão:</label>
  <input type="text" placeholder="Versão do produto (se houver)" id="versao" class="form-control required">
</div>
<div class="form-group col-md-12">
  <label>Descrição:</label>
  <textarea id="descricao" placeholder="Escreva uma descrição do problema" rows="3" class="form-control required"></textarea>
</div>
<div class="box-footer col-md-12">
  <button id="validar" class="btn btn-warning" type="button">Abrir OS</button>
</div>


</form>

2
  • Mas pelo que percebi ele só alerta inputs, select ele não está funcionando. Commented 21/06/2017 às 18:22
  • @ThiagoGabriel Tinha esquecido um detalhe, agora sim está validando todos os campos do formulário.
    – Leandro
    Commented 21/06/2017 às 18:25

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .