Javascript表单验证不起作用?

时间:2011-10-03 21:28:13

标签: php javascript forms validation

不能为我的生活弄清楚这一点。一旦我到达“countrySelect”id,表单验证STOPS就会工作。即使我填写此内容,并尝试让它显示zip或电话字段的警报它不起作用,它继续提交表单。但是,当countrySelect标识之前的输入为空时,警报会起作用。我不太明白......

以下是表格:

<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>

以下是页面开头的javascript函数:

<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>

3 个答案:

答案 0 :(得分:4)

您已定义country = document.getElementById("countrySelect");。将countrySelect的引用替换为countrystateSelect也是如此。

另外..为每个变量添加var,例如:var country = ...

答案 1 :(得分:2)

Rob是对的,而且:

DOM Select-Object没有value属性(请参阅:select reference)。

如果您想知道是否在select-dropdown中选择了任何内容,则需要检查.selectedIndex属性的值&gt; = 0。 例如:

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

答案 2 :(得分:0)

您的if()语句引用的变量countrySelect不存在。您创建了变量country以将DOM包含到该选择框中。所以从

更改代码
if(countrySelect.value.length==0){
    ...
}

要...

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