Skip to main content
adicionou 908 caracteres ao conteúdo
Fonte Link
Andrew Ribeiro
  • 1,8mil
  • 11
  • 14

Pra resolver isso, basta mudarvamos seguir as boas práticas e executar todo nosso JS quando o onclick para onsubmitDOM estiver pronto. Dai sua função validar agora recebe um parâmetro

Pra isso:

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

Primeira coisa que devemos fazer é o evento sendo disparado. Comter acesso ao eventobotão e ao formulário, basta dar umpara 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 preventDefaultaddEventListener().

Ficaria mais ou menos assim no botão e colocar a seguinte lógica: CASO A FUNÇÃO VALIDAR RETORNE VERDADEIRA, DÊ UM SUBMIT NO FORMULÁRIO.

<inputbutton.addEventListener("click", type="submit"function(e){
 class="btn btn-primary btn-lg" onsubmit="validarif(validar(form)") value="Enviar"/>form.submit();
});

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

function validar (eform_pergunta){ 
 var pergunta = eform_pergunta.preventDefaultpergunta.value; 
 var resposta = form_pergunta.resposta.value; 
 var desafio = form_pergunta.desafio.value; 
 var passou = true;
 if(pergunta=="");{ //Não 
 irá maisdocument.getElementById("valida_pergunta").style.display submeter= o"flex"; formulário 
 para o backendpassou = false;
 }  
 if /*(resposta == "") { 
  document.getElementById("valida_resposta").style.display ="flex";  
 RESTO DOpassou CODIGO= false;
} 
if (desafio ==""){ */
  document.getElementById("valida_desafio").style.display = "flex"; 
  passou = false;
}
return passou;    

No entanto, após executar as validações, você quer submeter o formulário. Para isso, basta usar a função submit() presente no objeto de form.}

form_pergunta.submit() Dessa forma deve funcionar.

Pra resolver isso, basta mudar o onclick para onsubmit. Dai sua função validar agora recebe um parâmetro que é o evento sendo disparado. Com acesso ao evento, basta dar um preventDefault().

Ficaria mais ou menos assim:

<input type="submit" class="btn btn-primary btn-lg" onsubmit="validar()" value="Enviar"/>

Dai no JS ficaria assim:

function validar(e){
    e.preventDefault(); //Não irá mais submeter o formulário para o backend
    /*
     RESTO DO CODIGO
    */
}

No entanto, após executar as validações, você quer submeter o formulário. Para isso, basta usar a função submit() presente no objeto de form.

form_pergunta.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.

ajuste de nome de variável para facilitar nos testes
Fonte Link
Andrew Ribeiro
  • 1,8mil
  • 11
  • 14

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, basta mudar o onclick para onsubmit. Dai sua função validar agora recebe um parâmetro que é o evento sendo disparado. Com acesso ao evento, basta dar um preventDefault().

Ficaria mais ou menos assim:

<input type="submit" class="btn btn-primary btn-lg" onsubmit="validar()" value="Enviar"/>

Dai no JS ficaria assim:

function validar(e){
    e.preventDefault(); //Não irá mais submeter o formulário para o backend
    /*
     RESTO DO CODIGO
    */
}

No entanto, após executar as validações, você quer submeter o formulário. Para isso, basta usar a função submit() presente no objeto de form.

form_pergunta.submit().

Espero ter ajudado.

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>

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, basta mudar o onclick para onsubmit. Dai sua função validar agora recebe um parâmetro que é o evento sendo disparado. Com acesso ao evento, basta dar um preventDefault().

Ficaria mais ou menos assim:

<input type="submit" class="btn btn-primary btn-lg" onsubmit="validar()" value="Enviar"/>

Dai no JS ficaria assim:

function validar(e){
    e.preventDefault(); //Não irá mais submeter o formulário para o backend
    /*
     RESTO DO CODIGO
    */
}

No entanto, após executar as validações, você quer submeter o formulário. Para isso, basta usar a função submit() presente no objeto de form.

form_pergunta.submit().

Espero ter ajudado.

Fonte Link
Andrew Ribeiro
  • 1,8mil
  • 11
  • 14

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>