1

Eu tenho duas funções JavaScript que são acionadas pelo mesmo botão, uma que é responsável pelas validações e outra que faz avançar a página.

Eu não consigo juntar essas funções e nem alterar a que avança de página, pois ela é feita pelo próprio framework da empresa, eu consigo mexer somente na função de validação.

O problema é que mesmo inserindo return null na função da validação, a função de avançar a página é acionada, ou seja, o formulário é validado mas a página avança mesmo assim.

Por motivos de confidenciabilidade eu não posso mostrar o código, mas espero que tenha ficado claro a situação.

Então, se eu tenho a situação a seguir:

onClick="functionValidacao(); functionAvancarPagina();"

Como "anular" a functionAvancarPagina() caso a functionValidacao() aponte erros?

1
  • Luiz, alguma das respostas resolveu o seu problema? Em caso afirmativo, vc pode escolher a que melhor resolveu e aceitá-la, veja aqui como e porque fazê-lo. Não é obrigatório, mas é uma boa prática do site, para indicar a futuros visitantes que aquilo resolveu o problema. E quando tiver 15 pontos vc também poderá votar em todas as respostas que achou úteis :-) E se nenhuma respondeu/resolveu, vc pode comentar e/ou se for o caso, editar a pergunta com mais detalhes :-)
    – hkotsubo
    22/03/2019 às 0:50

2 Respostas 2

3

Crie as duas functions, após isso dentro da função de validação, você faz uma validação(IF), se ocorrer tudo certo, voçê dispara a function de avançar. Espero ter ajudado !

function validar(){
    if(camposValidadosCorretamente == true){ // se a validação está correta
        this.irParaProximaPagina(); // chama função e vai para a próxima página
    }
}

function irParaProximaPagina(){
    ...
}
2
  • Oi Leroy! Podes juntar um exemplo de código? Nós ajudamos a formatar se fôr preciso
    – Sergio
    5/12/2018 às 17:44
  • Editei a resposta.
    – user125721
    5/12/2018 às 17:48
2

Você pode interceptar o evento de click antes que ele chegue no botão, executar os testes que você precisa e decidir se deixa o evento chegar no botão ou não.

Para fazer isso você vai precisar entender como os eventos se propagam pelo DOM, esta resposta tem uma explicação mais completa, mas um resumo seria:

  1. O usuário clica no botão
  2. O evento click propaga do window até o button. (Capture Phase)
  3. O evento chega no button. (Target Phase)
  4. O evento "borbulha" de volta ao window. (Bubbling Phase)

Talvez fique mais fácil de entender com a imagem abaixo:

Fases da propagação de eventos no DOM


Dito isso, você poderia escutar o evento click no pai do button na fase de captura (Capture Phase) e escolher se permite ou não que o evento propague até o button.

Para fazer isso basta usar o método Element.addEventListener() com o parâmetro useCapture como true para que o handler seja executado na Capture Phase.

btnParent.addEventListener('click', meuHandler, true);

Dentro de meuHandler você pode impedir que o evento chegue no botão utilizando o método Event.stopPropagation().

Segue um exemplo dos conceitos explicados:

var btn = document.getElementById('btn')
var check = document.getElementById('check')
var wrapper = document.getElementById('wrapper')

btn.addEventListener('click', function () {
  console.log('-> Esta função sai da página!')
})

wrapper.addEventListener('click', function(event) {
  if (check.checked) {
    console.log('Evento de click cancelado...')
    event.stopPropagation()
  }
}, true)
<span id="wrapper">
  <button id="btn">Click</button>
</span>

<label>
  <input id="check" type="checkbox"> Cancelar envio
</label>

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 .