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
.