1

Pessoa, beleza? Então, eu tenho uma div de alerta (aquela do bootstrap) com o display none e visibilidade hidden eu to pegando ela pelo id, tanto no css quanto no javascript, só que não funciona. Ele altera as propriedades do CSS mas ainda envia os dados para o PHP, a validação não está valendo de nada haha. Me ajudem, por favor. esse é um dos inputs que quero validar.

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

Essa é a div que eu coloco como hidden por padrão, ela está posicionada abaixo do input:

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

Quando eu clicar, que quero que ele exiba a div que está como hidden e não envie nada para o 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";
}
      }              

1 Resposta 1

1

Dê uma revisada no seu código, deve ter algo mais afetado este comportamento.

Outra coisa, não há necessidade de mudar visibilidade e display. Apenas o display é suficiente.

Veja esse código que eu fiz pra exemplificar.

Apenas com o display já funcionou.

<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

Como conversado em chat, foi identificado que não há nenhuma ação prevenindo o submit.

Pra resolver isso, vamos seguir as boas práticas e executar todo nosso JS quando o DOM estiver pronto.

Pra isso:

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

Primeira coisa que devemos fazer é ter acesso ao botão e ao formulário, para isso vamos criar duas variáveis:

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

(Não se esqueça de colocar o id="enviar" la no botão HTML)

Com acesso a isso, podemos executar uma função a cada vez que o botão for clicado, para isso vamos usar o addEventListener() no botão e colocar a seguinte lógica: CASO A FUNÇÃO VALIDAR RETORNE VERDADEIRA, DÊ UM SUBMIT NO FORMULÁRIO.

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

Agora vejamos a função validar. Esta irá receber um parâmetro que é o próprio formulário que recuperamos acima.

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;    

}

Dessa forma deve funcionar.

Espero ter ajudado.

9
  • Eu to usando um input do tipo submit, e os elementos estão dentro de um form, isso tem problema? Commented 7/01/2017 às 1:17
  • Nenhum problema. faz um console.log(input) pra saber se você está recuperando os inputs corretamente. Commented 7/01/2017 às 1:23
  • Eu ainda não sei usar essa função, maaaaas, eu dei um if na variavel que recebe, se tiver vazia ele da um alert, se não, ele n faz nada. funcionou, está pegando os dados. Commented 7/01/2017 às 1:30
  • console.log() é uma função pra loggar tudo que é objeto javascript. Pra você ver o log basta apertar F12 (Chrome) e ir na aba Console. Enfim, com alert também funciona. Retira o CSS que está alterando a visibilidade da div e mexa apenas com o display, como eu mostrei no código. Inclusive, você pode copiar o código se quiser, fique a vontade. Commented 7/01/2017 às 1:34
  • resolvi o problema, agora ele valida todos os campos, tirei a action php do form, ele valida e retorna a pagina original, só que ele faz isso muito rapido. Se eu colocar a action do php ele valida mas manda assim mesmo. Commented 7/01/2017 às 1:36

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 .