Ao meu ver o atributo minlength
não existe, por isso no JavaScript irei verificar se o tamanho da string é menor que 5.
Você pode inserir uma div
padrão após o campo com .after
com a respectiva mensagem. Essa div
pode ter a classe .erromsg
. No CSS eu defino uma cor vermelha para o texto da mensagem:
.erromsg{
color: #f30; /* cor do texto */
}
E no evento que pega o click e chama o Ajax, eu verifico os campos desta forma:
// remove as mensagens de erro
$(".erromsg").remove();
// verificar se os campos foram preenchidos
var nome = $("#nome");
var email = $("#email");
var telefone = $("#celular");
// Mensagem de erro padrão a ser inserida após o campo
var erromsg = '<div class="erromsg">Preencha o campo <span></span></div>';
if(!nome.val() || nome.val().length < 5){
nome.after(erromsg);
$(".erromsg span").text("nome corretamente");
return;
}
if(!email.val()){
email.after(erromsg);
$(".erromsg span").text("email");
return;
}
if(!telefone.val()){
telefone.after(erromsg);
$(".erromsg span").text("telefone");
return;
}
Quando um campo está vazio, insiro a mensagem e o return
impede o script prosseguir.
O código todo fica assim:
$("#proximo").click(function(){
// remove as mensagens de erro
$(".erromsg").remove();
// verificar se os campos foram preenchidos
var nome = $("#nome");
var email = $("#email");
var telefone = $("#celular");
// Mensagem de erro padrão a ser inserida após o campo
var erromsg = '<div class="erromsg">Preencha o campo <span></span></div>';
if(!nome.val() || nome.val().length < 5){
nome.after(erromsg);
$(".erromsg span").text("nome corretamente");
return;
}
if(!email.val()){
email.after(erromsg);
$(".erromsg span").text("email");
return;
}
if(!telefone.val()){
telefone.after(erromsg);
$(".erromsg span").text("telefone");
return;
}
var settings = {
// "async": true,
// "crossDomain": true,
"url": "script.php",
"method": "POST",
"headers": {
"Content-Type": "application/x-www-form-urlencoded",
},
"data": {
"nome": $("#nome").val(),
"email": $("#email").val(),
"celular": $("#celular").val()
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});
});
.erromsg{
color: #f30; /* cor do texto */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<form method="post">
<label>Nome Completo*</label>
<input id="nome" type="text" class="form-control" name="nome" placeholder="Nome Completo*">
<label>E-mail Válido*</label>
<input id="email" type="email" class="form-control" name="email" placeholder="Email Válido*">
<label>Telefone Válido*</label>
<input id="celular" type="text" class="form-control" name="celular" placeholder="Telefone">
<button type="button" name="submit" class="next action-button" id="proximo" value="Próximo"> Próximo</button>
</form>