Php Javascript表单验证不起作用?
我这辈子都搞不懂。一旦我找到countrySelect id,表单验证就会停止工作。即使我填写了此项,并试图让它显示zip或电话字段的警报,但它不起作用,它仍会继续提交表单。但是,当countrySelect id之前的输入为空时,警报工作。我不太明白 表格如下:Php Javascript表单验证不起作用?,php,javascript,forms,validation,Php,Javascript,Forms,Validation,我这辈子都搞不懂。一旦我找到countrySelect id,表单验证就会停止工作。即使我填写了此项,并试图让它显示zip或电话字段的警报,但它不起作用,它仍会继续提交表单。但是,当countrySelect id之前的输入为空时,警报工作。我不太明白 表格如下: <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="addAffiliate" id="addAffiliate" onsubm
<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.getElementByIdcountrySelect;。按国家/地区替换对countrySelect的引用。stateSelect也是如此
还有。。在每个变量之前添加var,例如:var country=..您的if语句引用了不存在的变量countrySelect。您创建了变量country以将DOM包含到该选择框中。因此,将代码从
if(countrySelect.value.length==0){
...
}
到
罗布是对的,而且: DOM Select对象没有值属性,请参见: 如果您想知道是否在选择下拉列表中选择了任何内容,则需要检查.selectedIndex属性的值>=0。 例如:
if (country.selectedIndex < 0) {
alert("You must enter your country");
country.style.border = '1px solid #fa0404';
country.focus();
return false;
}
尝试alertcountrySelect.value-显示什么?请包括您的populateState、initCountry和paymentfunction函数。若要将var添加到多个变量,请将var添加到第一个变量,用逗号分隔其他变量,最后一个变量留有分号。变量a=1,b=2,c=3;将来,在发布这样的问题之前,请确保检查错误控制台CTRL+SHIFT+J。我是个白痴。谢谢大家的帮助。添加var似乎解决了所有问题。
if (country.selectedIndex < 0) {
alert("You must enter your country");
country.style.border = '1px solid #fa0404';
country.focus();
return false;
}