2

Tenho uma função em jQuery, que quando o usuário clica no botão próximo ele dispara um e-mail.

Quando clicar no botão eu preciso que ele verifique os campos Nome, Email e Telefone foram preenchido e caso não tenha sido preenchido informar em baixo do input Por favor preencha o campo x

$("#proximo").click(function(){

    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); 

    });

});
<form method="post">
<label>Nome Completo*</label>
<input id="nome" minlength="5" 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>

3
  • Para colocar uma mensagem abaixo do campo com precisão, é preciso saber como esse formulário está formatado na página. Tem como postar um print de como aparece na tela?
    – Sam
    Commented 16/05/2018 às 16:52
  • tinypic.com/r/25k4j6a/9 Commented 16/05/2018 às 17:04
  • Como são poucos campos o ideal é o cenário de pegar os valores do campo e comparar em if, como já mencionado por um colega acima. Vi uma outra pessoa sugerindo usar o required do html, isso não resolve, tendo em vista que o usuário pode dar espaços no campo e o sistema entende como caractere. Commented 15/09/2022 às 13:38

2 Respostas 2

1

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>

2
  • Entendi!! Eu tentei fazer parecido porém não funcionava dentro do meu evento do click, outra dúvida, quando eu clico no botão próximo, eu passo para um segundo passo do formuláio que no caso é a classe .next, tem a possibilidade dele fazer essa validão sem passar para o próximo passo e só passar para o próximo passo após os 3 campos estarem preenchidos? Commented 16/05/2018 às 17:22
  • Sim, a validação que coloquei impede que ao clicar no botão "próximo" o Ajax só seja chamado se os 3 campos tiverem sido preenchidos.
    – Sam
    Commented 16/05/2018 às 17:26
1

Você não precisa implementar isso com Jquery. O próprio html já faz esse tipo de validação:

Basta colocar o atributo required no input que você deseja que seja obrigatório. Ex

<input required id="nome" minlength="5" type="text" class="form-control" name="nome" placeholder="Nome Completo*">

E basta que o botão de envio do seu formulário seja do tipo submit. Ex:

<button type="submit" name="submit" class="next action-button" id="proximo" value="Próximo"> Próximo</button> 

Com apenas esses 2 atributos, o html já irá fazer a validação que você necessita.

3
  • Só não será possível ver a validação no local que ele definiu "embaixo do input" e sim ficará de acordo com o padrão do browser. Commented 17/05/2018 às 17:31
  • A maioria dos browsers, por padrão, exibe mensagens de validações abaixo de seus respectivos inputs . Ex: Chrome, Firefox Commented 17/05/2018 às 17:38
  • Exibem como popover. Commented 18/05/2018 às 12:22

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 .