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>