你好，
我正在尝试开发 Javascript 以使此电子邮件表单正常工作。基本上，我需要确保用户在单击“提交”按钮时填写了这两个字段。如果字段未填写，应显示一条警告消息，并且光标应移回该字段。这是我的 HTML:
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="form.js"></script>
</head>
<body leftmargin=0 rightmargin=0>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post" action="form.html">Name:<br>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<input id = "email" name="textname" size=35><br><br>
<input type=submit name="button1" value="Submit">
</form>
</td>
</tr>
</center>
</body>
</html>
和 Javascript:
var $ = function (id) {
return document.getElementById(id);
}
submit = function () {
var name = $("name").value;
var email = $("email").value;
var isValid = true;
}
//validate entry for "Name:"
if (name == "") {
$("name_error").firstChild.nodeValue =
"Name is required.";
isValid = false;
} else {
$("name_error").firstChild.nodeValue = "";
}
//validate entry for "E-Mail:"
if (email == "") {
$("email_error").firstChild.nodeValue =
"E-mail is required.";
isValid = false;
} else {
$("email_error").firstChild.nodeValue = "";
}
if (isValid) {
//use the submit method of the form object to submit the form
$(emailform).submit();
}
现在什么都没有发生——无论字段是否填写。我是 Javascript 的新手，正在努力学习，所以请尽可能提供解释。 “firstChild 节点”的概念让我特别困惑。谢谢!
JSfiddle 链接:http://jsfiddle.net/HappyHands31/kx1q9wo7/
最佳答案
很明显您是初学者。所以请不要误会。你所做的事情有太多错误，很难知道从哪里开始。首先，您没有使用 jquery，但看起来您一直在查找有关如何执行此操作的代码主要是 jQuery 代码。您似乎不知道如何声明函数或将函数用作事件处理程序。您不了解变量范围。您正在尝试为 ID 为“name_error”和“email-error”的元素设置值，但您的 HTML 中不存在这些元素。除了 javascript 问题之外，您还在为页面使用表格布局。帮自己一个忙，学习 CSS 并使用 div 而不是表格。
这是您表单的有效验证(非 jQuery)。我还建议您学习 jQuery，因为它是 javascript 的 future (实际上是现在)。
http://jsfiddle.net/3ykvwxu9/1/
HTML:
<div id="content">
<div id="logo-wrapper">
<img src="castaway_logo.jpg"><br />
Vacations, LLC
</div>
<div id="errors"></div>
<form id="emailform" method="post" onsubmit="return validateEmailForm();" action="form.html">Name:<br>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<input id = "email" name="textname" size=35><br><br>
<input type="submit" name="button1" value="Submit">
</form>
</div>
CSS:
#content {
width: 100%;
position: relative;
}
#logo-wrapper {
float: right;
text-align: center;
padding-right: 15px;
}
#errors {
clear:both;
margin: 15px auto;
width: 300px;
height: 40px;
color: red;
}
form#emailform {
margin: 0 auto;
display: block;
width: 300px;
}
Javascript:
function validateEmailForm(){
var name = document.getElementById('name');
var email = document.getElementById('email');
var errDiv = document.getElementById('errors');
var error = '';
var focusElem;
if(name.value.length == 0){
error += "Name is required<br />";
focusElem = name;
}
if(email.value.length == 0){
error += "Email is required<br />";
if(focusElem == undefined){
focusElem = email;
}
}
if(error.length > 0){
errDiv.innerHTML = error;
focusElem.focus();
return false;
}
return true;
}
关于javascript - 如何使用 Javascript If 语句开发电子邮件列表应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33153862/