1

Estou criando uma validação em jQuery e quando o campo perde o foco ele verifica se está vazio e insere a mensagem de erro, mais toda vez que acontece esse evento insere a mesma mensagem. Como fazer isso sem essa repetição?

Queria fazer algo similar ao jquery-validate...

Meu código é esse:

$(function() {
  var $form = $("#formtest");
  $("#nome").on('blur', function() {
    var $this   = $("#nome"),
        $value  = $this.val();

    if ($value == "") {
      $form.submit(function() {
        return false;
      });
      if ($this.hasClass('.error')) {
        $this.removeClass("erro");
        $("small").remove();
      } else {
        $this.addClass("erro");
        $this.after("<small class='erro'>Preencha seu nome!</small>");

      }
    } else {
      $this.removeClass("erro");
      $("small.erro").remove();
      alert("tudo certo!");
      $form.submit(function() {
        return true;
      });
    }
  })
})
input.erro {
  border: 1px solid red;
}

.erro {
  color: red;
  padding-left: .3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest">
  <label>Nome</label>
  <br>
  <input type="text" id="nome" value="">
  <input type="submit" value="submit">
</form>

0

2 Respostas 2

2

A ÚNICA coisa que precisa fazer é trocar a linha $("small").remove(); de lugar, colocando-a antes do if:

$(function() {
  var $form = $("#formtest");
  $("#nome").on('blur', function() {
    var $this   = $("#nome"),
        $value  = $this.val();

    if ($value == "") {
      $form.submit(function() {
        return false;
      });
      // COLOQUE AQUI. Irá remover se existir
      $("small").remove();
      if ($this.hasClass('.error')) {
        $this.removeClass("erro");
      } else {
        $this.addClass("erro");
        $this.after("<small class='erro'>Preencha seu nome!</small>");

      }
    } else {
      $this.removeClass("erro");
      $("small.erro").remove();
      alert("tudo certo!");
      $form.submit(function() {
        return true;
      });
    }
  })
})
input.erro {
  border: 1px solid red;
}

.erro {
  color: red;
  padding-left: .3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest">
  <label>Nome</label>
  <br>
  <input type="text" id="nome" value="">
  <input type="submit" value="submit">
</form>

2
  • obrigado pela sua resposta, ajudou demais! queria entender essa lógica de ele ter que ser antes pra verificar, consegui explicar? Commented 26/01/2019 às 13:46
  • esqueci de perguntar, como faz pra verificar quando aperta o submit também...? Commented 26/01/2019 às 14:05
1

Uma solução interessante

Desta forma basta colocar data-required="Preencha seu nome!" no input text que você desejar colocando a mensagem de erro e assim você não vai precisar mais modificar o javascript para os novos campos que criar, e também você pode criar novas validações personalizadas com a mesma ideia.

Resultado

Os comentários do código estão explicando o seu funcionamento

//Função para cuidar da mensagem de erro
function setaMensagem(seletor, mensagem){

  //Verifica se já existe uma mensagem de erro
  if(seletor.next().attr("class") == 'erro'){
    seletor.next().text(mensagem); //Se existir apenas seta a mensagem
  }else{
    seletor.after("<small class='erro'>" + mensagem + "</small>");//Se não cria uma mensagem nova
  }
}

function validar(element){
    if(element.val().length <= 0){
      setaMensagem(element, element.data('required'));
      return false;
    }else{
      setaMensagem(element, "");
      return true;
    }
}

$(function() {
  $("[data-required]").on('blur', function() {
    validar($(this));
  });
  $('#formtest').submit(function() {
    return validar($("[data-required]"));
  });
})
input.erro {
  border: 1px solid red;
}

.erro {
  color: red;
  padding-left: .3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest">
  <label>Nome</label>
  <br>
  
  <input 
  type="text"  
  id="nome" 
  value="" 
  data-required="Preencha seu nome!">
  <!-- Defino apenas a mensagem de erro -->
  
  <small class='erro'></small>
  <input type="submit" value="submit">
</form>

Solucionando utilizando o seu código

Mensagem de erro vermelha

Para que a mensagem de erro seja setada apenas uma vez eu coloquei diretamente no html a tag

<small class='erro'></small>

Como ela esta vazia ela não estará visível, e no código Javascript eu coloquei da seguinte forma

$this.next().text("Preencha seu nome!");

Ele pega o próximo elemento utilizando o método next, que neste caso é a tag small e seta o texto, caso ele sete de novo ele substituir o texto anterior não repetindo assim o texto.

E por fim eu substituir o seguinte trecho

$("small").remove();

por

$("small").text("");

Assim ele apenas manipula o texto, já que o small sem texto como dito acima não aparece caso não haja um o texto.

Alert

Mas caso você queira limitar também o alert, criei uma flag com uma variável como fiz no caso "tudoCerto", assim o alert apareça somente uma vez.

O funcionamento é simples, a flag é setada com verdadeiro, e ao apresentar a mensagem ela e setada como falsa, caso o evento seja chamado novamente a mensagem não aparece já que a flag estará falsa.

Resultado

$(function() {
  var tudoCerto = true;
  var $form = $("#formtest");
  $("#nome").on('blur', function() {
    var $this   = $("#nome"),
        $value  = $this.val();

    if ($value == "") {
      $form.submit(function() {
        return false;
      });
      if ($this.hasClass('.error')) {
        $this.removeClass("erro");
      } else {
        $this.addClass("erro");
        $this.next().text("Preencha seu nome!");

      }
    } else {
      $this.removeClass("erro");
      $("small.erro").text("");
      if(tudoCerto){
        alert("tudo certo!");
        tudoCerto = false;
      }
      
      $form.submit(function() {
        return true;
      });
    }
  })
})
input.erro {
  border: 1px solid red;
}

.erro {
  color: red;
  padding-left: .3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formtest">
  <label>Nome</label>
  <br>
  <input type="text" id="nome" value="">
  <small class='erro'></small>
  <input type="submit" value="submit">
</form>

15
  • obrigado por sua resposta também, um método realmente interessante, só não entendi no seu exemplo, porque o data-required você passou a mensagem e depois teve que passar de novo dentro da função, não era pra pegar dinamicamente a mensagem do data-required? Commented 26/01/2019 às 13:50
  • Outra coisa que esqueci de pergunta na minha pergunta, da pra verificar isso quando aperta o submit também? Commented 26/01/2019 às 14:04
  • Terminei de fazer as alterações :) Commented 26/01/2019 às 14:26
  • 1
    Perfeito, você me salvou mesmo! agora posso fazer meu propio metodo Commented 26/01/2019 às 14:29
  • 1
    Verdade, obrigado! Commented 26/01/2019 às 16:16

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 .