0

Estou tentando fazer uma validação da existência de uma classe em 3 ids para retorno de um texto que será inserido num p após o clique no botão enviar de um form. Inseri o onclick no botão tendo a função como valor. Não sei onde estou errando, mas mesmo a classe existindo o valor que eu quero no p não está passando.

botão:

<button onclick="mensagemerro()" type="submit" name="mauticform[submit]" id="mauticform_input_teste_submit" name="mauticform[submit]" value="" class="mauticform-button btn btn-default" value="1">EXPERIMENTE GRÁTIS</button>`

div com o p e function:

<div class="ajuste-resposta-form">
    <p id="resposta"></p>
    <script>
        function mensagemerro() {
        var nome = $("#mauticform_teste_nome").hasClass("mauticform-has-error");
        var email = $("#mauticform_teste_email").hasClass("mauticform-has-error");
        var telefone = $("#mauticform_teste_telefone").hasClass("mauticform-has-error");
        if (nome || email || telefone == true) {
        texto = "O preenchimento dos campos abaixo é obrigatório";
        }
          document.getElementById("resposta").innerHTML = texto;
    }
    </script>
</div>
2
  • O form é submetido mesmo com erros ou este mautic cancela o envio?
    – LeAndrade
    18/08/2018 às 22:07
  • O próprio mautic cancela o envio.
    – A. Halasz
    19/08/2018 às 12:44

1 Resposta 1

1

Acho que você não estava incluindo o jQuery no seu código, já que está trabalhando com .hasClass().

Deixei o primeiro <input> com a class .mauticform-has-error para teste, se você retirar pode ver que não passa pelo if.

Código de como ficou:

function mensagemerro(){
    var nome = $("#mauticform_teste_nome").hasClass("mauticform-has-error");
    var email = $("#mauticform_teste_email").hasClass("mauticform-has-error");
    var telefone = $("#mauticform_teste_telefone").hasClass("mauticform-has-error");
    if (nome == true || email == true || telefone == true){
        texto = "O preenchimento dos campos é obrigatório";
        document.getElementById("resposta").innerHTML = texto;
    }
}
<!DOCTYPE html>
<html>
<head>
     <title> teste </title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
     <div>
         <input type="text" id="mauticform_teste_nome" class="mauticform-has-error">
         <input type="text" id="mauticform_teste_email" class="">
         <input type="number" id="mauticform_teste_telefone" class="">
         <button onclick="mensagemerro()" type="submit" name="mauticform[submit]" id="mauticform_input_teste_submit" name="mauticform[submit]" value="" class="mauticform-button btn btn-default" value="1">EXPERIMENTE GRÁTIS</button>
     </div>
     <div class="ajuste-resposta-form">
         <p id="resposta"></p>
     </div>
</body>
</html>

4
  • Oi Gabriel, o Jquery está lá, mas mesmo assim não funciona. Eu testei o retorno das variáveis no console e funcionou direitinho, acho que o problema está quando tento inserir o texto no p.
    – A. Halasz
    19/08/2018 às 13:40
  • você testou esse código que eu coloquei? ele está inserindo o texto.... 19/08/2018 às 13:41
  • testei sim, mas também não rolou.
    – A. Halasz
    20/08/2018 às 11:16
  • Deu certo. O mautic não estava deixando executar o código, quando coloquei tudo dentro da div do botão rolou. :)
    – A. Halasz
    20/08/2018 às 13:18

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 .