我这辈子都弄不明白。一旦我到达“countrySelect”id，表单验证就会停止工作。即使我填写了这个，并尝试让它显示它不起作用的邮政编码或电话字段的警报，它仍会继续提交表单。但是，当 countrySelect id 之前的输入为空时，警报会起作用。不太明白...
这是表格:
<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>
最佳答案
您已经定义了 country = document.getElementById("countrySelect");。将对 countrySelect 的引用替换为 country。 stateSelect 也是如此。
此外.. 在每个变量前添加var，例如:var country = ...。
关于php - Javascript 表单验证不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7640883/