-1

Eu preciso que, quando remova o foco do input, verifique se o campo ainda está vazio, se sim, um "d-block" é inserido na calsse da div com id "blurName". A solução postada resolve o problema, mas são muitos campos. Alguma ideia para reduzir tal trabalho?

HTML:

        <div class="col-md-6 mb-3">
          <label for="firstName">Nome</label>
          <input type="text" onblur="verificarForm()" class="form-control" id="firstName" placeholder="" value="" required="">
          <div id="blurName" class="invalid-feedback">
            Digite um nome válido.
          </div>
        </div>

Script:

function verificarForm(){
  var element = document.getElementById("blurName");
  if($("#firstName").val() == ''){
  element.classList.add("d-block");
  }else{
    element.classList.remove("d-block");
  }
}
0

1 Resposta 1

1

Primeira coisa é esquecer id's. Como um id deve ser único na página, não tem como manipular vários elementos com o mesmo id, como está fazendo na função na linha:

var element = document.getElementById("blurName");

E na linha:

if($("#firstName").val() == ''){

O que você precisa fazer é enviar para a função o elemento como parâmetro this, e lá na função pegar o próximo elemento do input que chamou a função e adicionar ou remover a classe .d-block. O método .nextElementSibling seleciona o elemento adjacente (adjacente: que vem logo após). O código fica extremamente simples e curto.

Embora esteja usando Bootstrap com jQuery, não é nem preciso usar o jQuery para isso, veja:

function verificarForm(e){
  e.nextElementSibling.classList[!e.value ? 'add' : 'remove']("d-block");
}
.invalid-feedback{
   display: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="col-md-6 mb-3">
   <label for="firstName">Nome</label>
   <input type="text" onblur="verificarForm(this)" class="form-control" placeholder="" value="" required="">
   <div class="invalid-feedback">
      Digite um nome válido.
   </div>
</div>
<div class="col-md-6 mb-3">
   <label for="firstName">Nome</label>
   <input type="text" onblur="verificarForm(this)" class="form-control" placeholder="" value="" required="">
   <div class="invalid-feedback">
      Digite um nome válido.
   </div>
</div>

Aqui: !e.value ? 'add' : 'remove' usei um operador ternário que irá selecionar um dos dois métodos (add ou remove) de acordo com o valor do input (!e.value).

O !e.value retorna true se o campo estiver vazio e chama o método add, do contrário irá chamar o método remove.

Você pode, inclusive, utilizar o .trim() para evitar que o usuário só digite espaços no input e seja considerado válido, já que espaços também são caracteres:

!e.value.trim()

Com jQuery ficaria desta forma a função:

function verificarForm(e){
  $(e).next()[!e.value ? 'addClass' : 'removeClass']("d-block");
}

O .next() do jQuery tem função similar ao .nextElementSibling.

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