为什么我的javascript不验证我的html表单
Why does my javascript not validate my html form?
我正在尝试用javascript验证我的表单,但它似乎不起作用。
任何人都可以看到我的代码中的错误在哪里吗?
这是我的网页代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<script src="js/validation.js"></script>
<title>Form</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
<fieldset>
<legend> Please fill out this Form</legend>
<p>
<label class="field" for"name"> First name:</label>
<input type="text" name="fname" class="textbox-300"/>
</p>
<p>
<label class="field" for"name">Last name:</label>
<input type="text" name="lname" class="textbox-300"/>
</p>
<p>
<label class="field" for"name">Email:</label>
<input type="text" name="email" class="textbox-300"/>
</p>
<p>
<label class="field" for"name">Phone:</label>
<input type="text" name="phonenumber" class="textbox-300"/>
</p>
<p>
<label class="field" for"name">Adress:</label>
<input type="text" name="address" class="textbox-300"/>
</p>
<p>
<input type="submit" value="submit">
</p>
</fieldset>
</form>
</body>
</html>
我的 Java 脚本代码来验证我的 HTML
function validateForm() {
var x = document.forms['myForm']['fname'].value;
var y = document.forms['myForm']['lname'].value;
var i = document.forms['myForm']['email'].value;
var j = document.forms['myForm']['phone'].value;
var address = document.forms['myForm']['address'].value;
var atpos = i.indexOf("@");
var dotpos = i.lastIndexOf(".");
// ______________________________________________
if (x == null || x == "") {
alert("First Name must be Entered");
return false;
}
//___________________________________________
if (y == null || y == "") {
alert("Last Name must be Entered");
return false;
}
//___________________________________________
if (parseInt(j) != j) {
alert("Please enter a correct phone number");
return false;
}
//___________________________________________
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= i.length) {
alert("Not a valid e-mail address");
return false;
}
//___________________________________________
if (address == null || address == "") {
alert("You most enter your Address");
return false;
}
}
我已经一遍又一遍地检查了它,但找不到错误。
首先,将来请尝试将您的代码简化为一个小示例,而不是在问题中插入整个页面。一个很好的方法是使用jsFiddle。
其次,请使您的代码有效!我已经检查并更正了您损坏的 HTML,例如代码中应该for="name"
的各种位,例如 for"name"
.
第三,在解决此问题后,很明显问题(显示在浏览器控制台中,调试Javascript的关键)是您试图获得undefined
value
。这意味着,在某个地方,你打电话给value
不存在的东西。
浏览你的Javascript并将其与HTML进行比较,我们看到了这种对比:
.HTML
<p>
<label class="field" for"name">Phone:</label>
<input type="text" name="phonenumber" class="textbox-300" />
</p>
爪哇语
var j = document.forms['myForm']['phone'].value;
你看到问题了吗?您的元素的名称为 phonenumber
,而您正在访问 phone
。如果将代码更改为 document.forms['myForm']['phonenumber'].value
,则工作正常。
这是您在工作 jsFiddle 中的代码。
最后,当然,您的主要问题可以概括为"重新发明轮子"。您正在做的事情以前已经实现了很多次(并且启动起来要好很多倍)。研究可以为您完成工作的框架,尤其是使用HTML5内置表单验证的现代框架。
只需更改 Java 脚本代码:
var j = document.forms['myForm']['phone'].value;
跟
var j = document.forms['myForm']['phonenumber'].value;
这是你的运气(JsFiddle)
相关文章:
- 无法将数据从firebase获取到我的html页面
- 我的HTML按钮没有在Javascript中运行
- 我的html有一些错误
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- 为什么<p>没有插入到我的html中
- 如何在我的html网页中使用jquery自动完成
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 如何重定向到我的html网站youtube嵌入视频打开在youtube应用程序
- 为什么我的html页面没有在<ui视图>
- 在将javascript附加到我的html中时遇到问题
- 为什么我的HTML标签消失了
- 使用 JavaScript 在我的 html 页面中放大图像
- 如何在javascript中调用onclick事件?我没有'我不想在我的HTML页面中使用任何事件
- 我的HTML、CSS和Javascript应该放在一起还是分开
- 为什么我的HTML似乎无法访问我的javascript
- 如何使用 javascript 向我的 html 添加内容而不擦除整个页面
- 如何为我的 html 表单制作打印预览和打印按钮
- 无法将我的 html 文档连接到 jquery
- JavaScript函数不适用于我的HTML表单