Script Processing Form When It's Not Supposed To

I have a snippet of javascript to check and make sure all the fields in a form are filled in. If they aren't then it shows an alert box telling you to put something in that form. If all the fields are filled in then it submits the form. That piece of code is this:

Code:

function checkFields() {
var errors = "no";
if(document.street_team.email.value == "") {
alert("Please enter an e-mail address..");
errors = "yes";}
if(document.street_team.name_first.value == ""){
alert("Please enter your first name.");
errors = "yes";}
if(document.street_team.name_last.value == ""){
alert("Please enter your last name.");
errors = "yes";}
if(document.street_team.loc_state.value == ""){
alert("Please enter your state.");
errors = "yes";}
if(document.street_team.loc_city.value == ""){
alert("Please enter your city.");
errors = "yes";}
if(errors != "yes"){
document.street_team.submit();}
}
Then i used a button to start the script. That code is this:

Code:

<button onClick="checkFields()">Join</button>
The problem is that if you don't have something filled in and the alert box pops up, once you click "ok" it still processes the form. Any ideas on how to keep it from doing that?