Javascript validation does not work

Question

Person, all right? So, I have an alert div (that of bootstrap) with the None display and Hidden visibility I’m getting it by id, both in css and javascript, only it doesn’t work. It changes the properties of CSS but still sends the data to PHP, the validation is not worth anything haha. Help me, please. this is one of the inputs I want to validate.

    <input type="text" name="pergunta" data-placement="bottom" class="form-control" placeholder="Ex: XXXXXXXXXX?" aria-describedby="basic-addon1">

This is the div I put as Hidden by default, it is positioned below the input:

<div class="alert alert-danger" id="valida_pergunta" role="alert"><span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Pergunta</div>

When I click, I want it to display the div that is like Hidden and do not send anything to PHP.

  function validar (){
var pergunta = form_pergunta.pergunta.value;
var resposta = form_pergunta.resposta.value;
var desafio = form_pergunta.desafio.value;
if(pergunta==""){
  document.getElementById("valida_pergunta").style.display = "flex";
}
if (resposta == "") {
  document.getElementById("valida_resposta").style.display ="flex";
}
if (desafio ==""){
  document.getElementById("valida_desafio").style.display = "flex";
}
      }              

Answer 1

Have a look at your code, there must be something else affected this behavior.

Another thing, there is no need to change visibility and display. Only the display is sufficient.

Look at this code I made to illustrate.

Only with the display already worked.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="text" id="input" />
<div class="alert alert-danger" id="valida_pergunta" role="alert" style="display: none;"><span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Pergunta</div>
<button onclick="validar()">VAI</button>

<script>
  function validar() {
    var input = document.getElementById("input").value;

    if (input == "") {
      document.getElementById("valida_pergunta").style.display = "inline";
    }
  }
</script>

UPDATE

As discussed in chat, it has been identified that there is no action preventing Submit.

To solve this, we will follow good practices and execute all our JS when the DOM is ready.

For that reason:

window.onload = function(){
      //Código aqui
}

First thing we must do is to have access to the button and the form, for this we will create two variables:

var button = document.getElementById("enviar");
var form = document.getElementById("form_pergunta");

(Don’t forget to put the id="send" there in the HTML button)

With access to this, we can perform a function every time the button is clicked, for this we will use the addEventListener() button and put the following logic: IF THE VALIDATE FUNCTION RETURNS TRUE, PLEASE SUBMIT TO THE FORM.

button.addEventListener("click", function(e){
    if(validar(form)) form.submit();
});

Now let’s see the validate function. This will receive a parameter which is the form itself that we recovered above.

function validar (form_pergunta){ 
 var pergunta = form_pergunta.pergunta.value; 
 var resposta = form_pergunta.resposta.value; 
 var desafio = form_pergunta.desafio.value; 
 var passou = true;
 if(pergunta==""){ 
  document.getElementById("valida_pergunta").style.display = "flex"; 
   passou = false;
 } 
 if (resposta == "") { 
  document.getElementById("valida_resposta").style.display ="flex"; 
  passou = false;
} 
if (desafio ==""){ 
  document.getElementById("valida_desafio").style.display = "flex"; 
  passou = false;
}
return passou;    

}

That way it should work.

I hope I’ve helped.