Insert text of a variable (resulting from an if) within a p after a button click

Question

Insert text of a variable (resulting from an if) within a p after a button click

Navigation

#1 by (1 votes)

0

I am trying to validate the existence of a class in 3 ids to return a text that will be inserted into a p after clicking on the submit button of a form. I inserted the onclick button with the function as value. I do not know where I'm going wrong, but even the class existing the value I want in p is not passing.

button:

<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 with p and 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>

javascript html jquery

asked by anonymous 18.08.2018 / 23:54

1 answer

How to remove, insert or change a single character in a field in MySql? How to compare more than one column in an IN clause?

score 1 · Accepted Answer

I think you were not including jQuery in your code since you're working with .hasClass() .

I left the first <input> with the class .mauticform-has-error to test, if you check out you can see that it does not pass if .

How-to code:

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><inputtype="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>