Javascript form validation not working?

Question

Can't for the life of me figure this out. The form validation STOPS working once I get to the "countrySelect" id. Even if I fill this in, and try to get it to show the alert for the zip or phone field it doesn't work, it continues submitting the form. However, the alerts work when an input before the countrySelect id is blank. I don't quite understand...

Here is the form:

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="addAffiliate" id="addAffiliate" onsubmit="return ValidateApplication()">
            <div id="affiliatesignup">
              <ul>
                <li>
                  <label>First Name</label>
                  <input type="text" name="firstname" id="firstname" value="<?php echo $firstname ;?>" />
                </li>
                <li>
                  <label>Last Name</label>
                  <input type="text" name="lastname" id="lastname"  value="<?php echo $lastname ;?>" />
                </li>
                 <li>
                  <label>Username</label>
                  <input type="text" name="username" id="username"  value="<?php echo $username ;?>" /> 
                  <label> </label>
                  <div style="margin-left:130px;font-size:11px;">(Note: Your username will appear in all your affiliate links, so choose wisely!)</div>
                </li>
                <li>
                  <label>Email</label>
                  <input type="text" name="email" id="email"  value="<?php echo $email ;?>" />
                </li>
                <li>
                  <label>Password</label>
                  <input  type="password" size="30" name="password" id="password" value="<?php echo $password ;?>"/>
                </li>
                <li>
                  <label>Confirm Password</label>
                  <input type="password" size="30" name="passwordc" id="passwordc" value="<?php echo $passwordc ;?>"/>
                </li>
                <div class="form-break"></div>
                <li>
                  <label>Mailing Address</label>
                  <input type="text" name="address" id="address"  value="<?php echo $address ;?>" />
                </li>
                <li>
                  <label>City</label>
                  <input type="text" name="city" id="city"  value="<?php echo $city ;?>" />
                </li>
                <li>
                  <label>Country</label>
                  <select id='countrySelect' name='countrySelect' onchange='populateState()'>
                  </select>
                </li>
                 <li>
                  <label>State/Province</label>
                  <select id='stateSelect' name='stateSelect'>
                  </select>
                  <script type="text/javascript">initCountry('US'); </script>
                </li>
                <li>
                  <label>Zip/Postal Code</label>
                  <input type="text" name="zip" id="zip"  value="<?php echo $zip ;?>" />
                </li>
                <li>
                  <label>Phone Number</label>
                  <input type="text" name="phone" id="phone"  value="<?php echo $phone ;?>" />
                </li>
                <div class="form-break"></div>
                <li>
                  <label>Payment Type</label>
                  <select name="payment_type" id="payment_type" onChange="paymentfunction(this.value);">
                    <option value="">Select Payment Type</option>
                    <option value="check">Check</option>
                    <option value="paypal">Paypal</option>
                  </select>
                </li>
                <li id="check-payable-to" style="display:none;">
                  <label>Check Payable To</label>
                  <input type="text" name="check_payable_to" id="check_payable_to"  value="<?php echo $check_payable_to ;?>" />
                </li>
                <li id="paypal-email" style="display:none;">
                  <label>Paypal Email</label>
                  <input type="text" name="paypal" id="paypal"  value="<?php echo $paypal ;?>" />
                </li>
                <div class="form-break"></div>
                <li>
                  <label>Website</label>
                  <input type="text" name="website" id="website"  value="<?php echo $website ;?>" />
                </li>
                <li>
                  <label>How do you plan to promote us?</label>
                  <textarea rows="4" name="promotion" id="promotion" type="text"><?php echo $promotion ;?></textarea>
                </li>
              </ul>
              <input type="hidden" value="<?php echo $affiliate ; ?>" name="affiliate" id="affiliate" />
              <input type="submit" value="Register" class="button-glossy green" id="bCreateAccount" tabindex="4" />
            </div>
          </form>

Here is the javascript function contained in the head of the page:

<script type="text/javascript">

    function ValidateApplication() {

            firstname = document.getElementById("firstname");
            lastname = document.getElementById("lastname");
            username = document.getElementById("username");
            email = document.getElementById("email");
            password = document.getElementById("password");
            passwordc = document.getElementById("passwordc");
            address = document.getElementById("address");
            city = document.getElementById("city");
            country = document.getElementById("countrySelect");
            state = document.getElementById("stateSelect");
            zip = document.getElementById("zip");
            phone = document.getElementById("phone");
            payment_type = document.getElementById("payment_type");
            check_payable_to = document.getElementById("check_payable_to");
            paypal = document.getElementById("paypal");
            website = document.getElementById("website");
            promotion = document.getElementById("promotion");

            if (firstname.value.length == 0) {
                alert("You must enter your first name");
                firstname.style.border = '1px solid #fa0404';
                firstname.focus();
                return false;   
            }
            if (lastname.value.length == 0) {
                alert("You must enter your last name");
                lastname.style.border = '1px solid #fa0404';
                lastname.focus();
                return false;   
            }
            if (username.value.length == 0) {
                alert("You must enter a user name");
                username.style.border = '1px solid #fa0404';
                username.focus();
                return false;   
            }
            if (email.value.length == 0) {
                alert("You must enter your email address");
                email.style.border = '1px solid #fa0404';
                email.focus();
                return false;   
            }
            if (password.value.length == 0) {
                alert("You must enter a password");
                password.style.border = '1px solid #fa0404';
                password.focus();
                return false;   
            }
            if (passwordc.value.length == 0) {
                alert("You must confirm your password");
                passwordc.style.border = '1px solid #fa0404';
                passwordc.focus();
                return false;   
            }
            if (password.value != passwordc.value) {
                alert("You passwords must match");
                password.style.border = '1px solid #fa0404';
                passwordc.style.border = '1px solid #fa0404';
                password.focus();
                return false;   
            }
            if (address.value.length == 0) {
                alert("You must enter your mailing address");
                address.style.border = '1px solid #fa0404';
                address.focus();
                return false;   
            }
            if (city.value.length == 0) {
                alert("You must enter your city");
                city.style.border = '1px solid #fa0404';
                city.focus();
                return false;   
            }
            if (countrySelect.value.length == 0) {
                alert("You must enter your country");
                countrySelect.style.border = '1px solid #fa0404';
                countrySelect.focus();
                return false;   
            }
            if (stateSelect.value.length == 0) {
                alert("You must enter your state/province");
                stateSelect.style.border = '1px solid #fa0404';
                stateSelect.focus();
                return false;   
            }
            if (zip.value.length == 0) {
                alert("You must enter your zip/postal code");
                zip.style.border = '1px solid #fa0404';
                zip.focus();
                return false;   
            }
            if (phone.value.length == 0) {
                alert("You must enter your phone number");
                phone.style.border = '1px solid #fa0404';
                phone.focus();
                return false;   
            }
            if (payment_type.value.length == 0) {
                alert("You must select your payment type");
                payment_type.style.border = '1px solid #fa0404';
                payment_type.focus();
                return false;   
            }
            if (payment_type.value == 'check') {
                if (check_payable_to.value.length == 0) {
                    alert("You must enter the name your check is payable to");
                    check_payable_to.style.border = '1px solid #fa0404';
                    check_payable_to.focus();
                    return false;   
                }   
            }
            if (payment_type.value == 'paypal') {
                if (paypal.value.length == 0) {
                    alert("You must enter paypal email address");
                    paypal.style.border = '1px solid #fa0404';
                    paypal.focus();
                    return false;   
                }   
            }
            if (website.value.length == 0) {
                alert("You must enter your website address");
                website.style.border = '1px solid #fa0404';
                website.focus();
                return false;   
            }
            if (promotion.value.length == 0) {
                alert("You must enter your promotional plans");
                promotion.style.border = '1px solid #fa0404';
                promotion.focus();
                return false;   
            }

    }
    </script>

Answer 1

You have defined country = document.getElementById("countrySelect"); . Replace the references to countrySelect by country . The same is true for stateSelect .

Also.. Add var befor each variable, eg: var country = ... .

Answer 2

Rob is right, and also:

The DOM Select-Object has no value property (see: select reference ).

You will need to check the .selectedIndex property for a value >= 0, if you want to know whether anything has been selected in the select-dropdown. For example:

       if (country.selectedIndex < 0) {
            alert("You must enter your country");
            country.style.border = '1px solid #fa0404';
            country.focus();
            return false;   
        }

Answer 3

Your if() statement refers to the variable countrySelect, which does not exist. You created the variable country to contain the DOM to that select box. So change the code from

if(countrySelect.value.length==0){
    ...
}

To....

if(country.value.length==0){
    ...
}