My Javascript code for form validation won't work

Question

I created simple form validation but nothing is working. Below is my code for the form and javascript. I took it right from a textbook. I have a submit button. When I click it nothing happens. I am using an external .js file and did include the link the section on the page. I would really appreciate your input.

<form name="reservation" onsubmit="return validate(this);">
<fieldset>
<legend>Reservation</legend>
<br/>
<label>Name*</label>
<br/>
<input type="text" name="txtName" id="txtName" size="60">
<br/><br/>
<label>Date and Time*</label>
<br/>
<input type="text" id="txtDate" name="txtDate" size="40"><a href="javascript:NewCal('txtDate','mmmddyyyy',true,12)"><img src="../Images/cal.gif" width="18" height="18" border="0" alt="Pick a date"></a>
<br/><br/>
<label>Party Size*</label>
<br/>
<input type="text" id="txtParty" name="txtParty" size="20">
<br/><br/>
<label>Phone*</label>
<br/>
<input type="text" id="txtPhone" name="txtPhone" size="40">
<br/><br/>
<label>Email*</label>
<br/>
<input type="text" id="txtEmail" name="txtEmail" size="60">
<br/><br/>
<input type="submit" id="button" value="Submit"/>
<p id="main_text">
*=required
</p>
</fieldset>
</form>

Javascript:

function validate(form){

    var returnValue=true;

    var name = form.txtName.value;
    var date = form.txtDate.value;
    var party = form.txtParty.value;
    var phone = form.txtPhone.value;
    var email = form.txtEmail.value;


        if (name=="") {
        returnValue = false;
        alert("Name is a required field");
        document.reservation.txtName.focus();
    }


    if (date=="") {
        returnValue = false;
        alert("Date is a required field");
        reservation.txtName.focus();
    }

    if (party=="") {
        returnValue = false;
        alert("Party Size is a required field");
        document.reservation.txtName.focus();
    }

    if (phone=="") {
        returnValue = false;
        alert("Phone is a required field");
        document.reservation.txtName.focus();
    }

    if (email=="") {
        returnValue = false;
        alert("Email is a required field");
        document.reservation.txtName.focus();
    }
    alert("Thank for providing your information.\n
    We will get back you as soon as possible.");
    return returnValue;
}

Answer 1

I think you should look into using jQuery It's so much more effective and easy to use! You should also look into using else if() statements.

var name = $('#txtName').val(); 
var email = $('#txtEmail').val();
    if(name == ""){ alert("Please fill in the name field"); 
        $('#txtName').focus(); 
        return false;
     }
     else if(email == ""){ alert("Please fill in the email field");
     $('#txtName').focus(); 
     return false;
     }else{ 
      alert("All good");
      return true;
    }