[英]What is wrong with my form validation function?
I have a simple form that asks for Name, Email, Phone Number, Age and Income. 我有一个简单的表格,要求输入姓名,电子邮件,电话号码,年龄和收入。 When I hit submit, the validateForm function is supposed to check for errors and if there are any errors the textbox will be red and there will be a red error message display under the form. 当我点击Submit时,validateForm函数应该检查错误,如果有任何错误,文本框将显示为红色,并且表单下方将显示红色的错误消息。 The function doesn't seem to be working at all and I'm not sure why. 该功能似乎根本不起作用,我不确定为什么。 This is my form and script. 这是我的表格和脚本。 I tried setting the submit button to have an onclick event to call the function but that didn't work either. 我尝试将提交按钮设置为具有onclick事件以调用该函数,但这也不起作用。
<script>
function validateForm() {
if (document.forms.formValidation.Name.value == "") {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
return false;
}
if (document.forms.formValidation.email.value == "") {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.email.style.backgroundColor = "red";
}
var phoneNo = /^\d{10}$/;
if (document.forms.formValidation.number.value.match(phoneNo)) {
return true;
}
else {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.number.style.backgroundColor = "red";
return false;
}
var emailVal = document.formValidation.email.value;
ampersandPos = emailVal.indexOf("@");
dotPos = emailVal.lastIndexOf(".");
if (amersandPos < 1 || (dotPos - amersandPos < 2)) {
alert("Please enter a valid email address.");
document.getElementById("error").style.display = "inline";
return false;
}
return true;
var len = age.length;
for (var i = 0; i < len; i++) {
if (document.forms.formValidation.age[i].checked)
{
return true;
}
else {
document.getElementById("error").style.display = "inline";
return false;
}
}
}
</script>
<form name="formValidation" onsubmit="return validateForm()">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">First and Last Name: </td>
<td align="left"><input type="text" id="name" name="Name" ></td>
</tr>
<tr>
<td align="right">Email: </td>
<td align="left"><input type="text" id="email" name="email" ></td>
</tr>
<tr>
<td align="right">Phone Number: </td>
<td align="left"><input type="text" name="number" /></td>
</tr>
<tr>
<td align="right">Age:</td>
<td class="rad"><input type="radio" name="age" value="minor">Under 18</td>
<td class="rad"><input type="radio" name="age" value="adult">18-64</td>
<td class="rad"><input type="radio" name="age" value="senior">65+</td>
</tr>
<tr>
<td align="right">Income:</td>
<td>
<select>
<option value="underFifty">Under $50,000</option>
<option value="fiftyToHundred">$50,000 - $100,000</option>
<option value="overHundred">Over $100,000</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<div id="error">
<p>Required fields are missing!</p>
</div>
You are missing a closing parenthesis on this line: 您在此行上缺少右括号:
if (amersandPos < 1 || (dotPos - amersandPos < 2)
Also, this line is not valid: 另外,此行无效:
document.formValidation.email.style.background-color = "red";
Because background-color
is not a valid identifier name. 因为background-color
不是有效的标识符名称。
Here's a fiddle with these and the one issue in the comment fixed: https://jsfiddle.net/0zyv3g98/ 这是一个小玩意儿,并且已修复注释中的一个问题: https : //jsfiddle.net/0zyv3g98/
You have mistakes in you js. 您的js中有错误。 you cannot use document.formValidation.name or something like that. 您不能使用document.formValidation.name或类似的名称。 the correct syntax is `document.forms.formValidation. 正确的语法是`document.forms.formValidation。 Correction all your code and it will work. 更正所有代码,它将起作用。
if (document.forms.formValidation.Name.value == "") {
document.forms.formValidation.getElementById("error").style.display = "inline";
document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
//return false;
}
if (document.forms.formValidation.email.value == "") {
document.forms.formValidation.getElementById("error").style.display = "inline";
document.forms.formValidation.email.style.backgroundColor = "red";
}
var emailVal = document.forms.formValidation.email.value;
ampersandPos = emailVal.indexOf("@");
dotPos = emailVal.lastIndexOf(".");
if (amersandPos < 1 || (dotPos - amersandPos < 2)
{
alert("Please enter a valid email address.");
document.forms.formValidation.getElementById("error").style.display = "inline";
return false;
}
return true;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.