0

Comecei ontem a estudar JavaScript e estou com dificuldades na validação de busca. Estou seguindo os passos de um livro que estou utilizando para o projeto proposto. Precisava enviar o formulário de busca, ou seja, ao confirmar a busca com o campo não preenchido a função disparar um Alert com uma mensagem e não prosseguisse com a busca. Porém, o Alert está sendo disparado ao atualizar a página. Segue a foto do código.

function validaBusca() {
if(document.querySelector('#q').value == ''){
    alert('Campo de busca vazio, por favor preencha o campo!');
        return false;
}
}
//Fazendo a associação da função com o evento
document.querySelector('#form-busca').onsubmit = validaBusca();

O Value e onsubmit não estão no autocomplete da IDE (WebStorm). Isso é normal?

1 Resposta 1

0

Correção

Quando você atribui uma função a um elemento pelo "onAlgumaCoisa" no código JavaScript utilizando () no final do nome dela, o browser entende que ela deve ser executada imediatamente, se remover () do final do nome da função seu código irá funcionar.

function validaBusca() {
  if(document.querySelector('#q').value == ''){
    alert('Campo de busca vazio, por favor preencha o campo!');
    return false;
  }
}

//Fazendo a associação da função com o evento
busca = document.querySelector('#form-busca').onsubmit = validaBusca;
<form id="form-busca">
  <input id="q" type="text">
  <input type="submit">
</form>

Outras maneiras

#1

Você pode colocar a função validaBusca() dentro do onsubmit que fica dentro da tag form desta forma:

<form id="form-busca" onsubmit="validaBusca()">
  <input id="q" type="text">
  <input type="submit">
</form>

E apagar a parte:

document.querySelector('#form-busca').onsubmit = validaBusca();

#2

Uma outra maneira de atribuir um evento a um determinado elemento é através da função addEventListener("evento", "função ou bloco de código"), o evento que você precisa é o "submit" ou seja, deve ser disparado quando o formulário for submetido.

Pode fazer desta forma:

function validaBusca() {
  if(document.querySelector('#q').value == ''){
    alert('Campo de busca vazio, por favor preencha o campo!');
    return false;
  }
}

//Fazendo a associação da função com o evento
busca = document.querySelector('#form-busca');

busca.addEventListener('submit', validaBusca);
<form id="form-busca">
    <input id="q" type="text">
    <input type="submit">
</form>

2
  • 1
    Laércio, como foi informado pelo autor da pergunta. Ele começou aprender javascript ontem. Acredito que uma melhor explicação da resposta seria de grande ajuda para ele. Pode ser que ele não saiba o que é addEventListener ou mesmo como chamar o método diretamente do HTML.
    – Bsalvo
    1/08/2017 às 14:36
  • @Bsalvo, entendido, vou explicar. 1/08/2017 às 14:37

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 .