Validação java Script

Front-end
#1

To seguindo a apostila da caelum html css e java Script tem o seguinte html:

<head>
              <script type="text/javascript" src="js/home.js"></script>
</head>

<section class="busca">
	<h2>Busca</h2>

		<form action="http://www.google.com.br/search" id="form-busca">
			<input type="search" name="q" id="q">
			<input type="image" src="img/busca.png">
		</form>

</section><!-- fim .busca -->

e logo em seguida o java Script:

function validaBusca() {
	
	//se o id for q e o valor for vazio entao exiba o texto do alert e retorne falso para abortar o formulario
	if (document.querySelector('#q').value == '') {
		alert('Não podia ter deixado em branco a busca!');
		return false;
	}
}

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

Quando faço a validação com o campo de [i][u]texto da busca vazia[/i][/u] o mesmo volta para a página da google e [color=red][i]não exibe o alerta[/i][/color], queria saber o por quê do não funcionamento.

#2

[quote=maiden]To seguindo a apostila da caelum html css e java Script tem o seguinte html:

<head>
              <script type="text/javascript" src="js/home.js"></script>
</head>

<section class="busca">
	<h2>Busca</h2>

		<form action="http://www.google.com.br/search" id="form-busca">
			<input type="search" name="q" id="q">
			<input type="image" src="img/busca.png">
		</form>

</section><!-- fim .busca -->

e logo em seguida o java Script:

function validaBusca() {
	
	//se o id for q e o valor for vazio entao exiba o texto do alert e retorne falso para abortar o formulario
	if (document.querySelector('#q').value == '') {
		alert('Não podia ter deixado em branco a busca!');
		return false;
	}
}

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

Quando faço a validação com o campo de [i][u]texto da busca vazia[/i][/u] o mesmo volta para a página da google e [color=red][i]não exibe o alerta[/i][/color], queria saber o por quê do não funcionamento.[/quote]

aqui pra mim funcionou desta forma:

    <head>  
                  <script>
function validaBusca() {  
    if (document.querySelector('#q').value == '') {  
        alert('Não podia ter deixado em branco a busca!');  
        return false;  
    }  
}  

window.onload = function(e){ 
// fazendo a associação da função com o evento  
document.querySelector('#form-busca').onsubmit = validaBusca; 
}
  

	</script>  
    </head>   
    <section class="busca">  
        <h2>Busca</h2> 
            <form action="http://www.google.com.br/search" id="form-busca">  
                <input type="search" name="q" id="q">  
                <input type="image" src="img/busca.png">  
            </form> 
    </section>
#3