如何使用Javascript If语句开发电子邮件列表应用程序_Javascript_Jquery_Html_Email_If Statement

如何使用Javascript If语句开发电子邮件列表应用程序

javascript jquery html email if-statement

如何使用Javascript If语句开发电子邮件列表应用程序,javascript,jquery,html,email,if-statement,Javascript,Jquery,Html,Email,If Statement,嗨我正在尝试开发Javascript，以使此电子邮件表单正常工作。基本上，我需要确保用户在单击“提交”按钮时填写这两个字段。如果未填写字段，则会显示一条警告消息，光标应移回该字段。这是我的HTML： <html> <head> <title>Castaway Vacations, LLC</title> <script src="form.js"></script> </head> <body leftm

嗨

我正在尝试开发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>&nbsp;</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新手，正在努力学习，如果可能的话，请提供解释。“firstChild节点”的概念让我特别困惑。谢谢大家!

JSIDLE链接：

尝试删除

submit（）

函数中的

var

单词

var

告诉javascript引擎该变量的作用域在函数内部，因此在另一个函数中不存在。删除变量将变量附加到全局

窗口对象。它在严格模式下不起作用，但您没有定义它，因此它对您起作用
请尝试删除submit（）
函数中的var
单词var
告诉javascript引擎该变量的作用域在函数内部，因此在另一个函数中不存在。删除变量将变量附加到全局窗口对象。它在严格模式下不起作用，但您没有定义它，因此它对您起作用
var  submit = function () {
  var name = $("name").value; 
  var email = $("email").value;
  var isValid = true;

    //These are all local variables so they won't be accessible any where else. Nor are you really checking anything. This function just sets isValid = true locally.
}

这并不是定义事件侦听器或函数的正确方法。我真的不确定你来这里干什么。。如果这应该附加到表单的提交事件，那么您可能需要查看onsubmit
属性

如果您只是想要一个全局函数，您应该这样定义它：
function submit() { 
    //Insert code here
}


这没有附加到任何内容，它将在解析脚本时运行一次，然后再也不会运行
而且它看起来好像name\u error
实际上不存在于您的HTML中，所以这当然找不到任何东西
//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();
}

这里也是一样，当脚本加载时，您可以任意运行这个脚本。实际上没有检查任何东西
//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();
}

与其他代码一样，此代码将运行一次。检查isValid
是否为true，因为您的isValid
变量无法全局访问，因此不会为true。如果它神奇地可用，它将自动提交您的表单

下面是一个基本的JSFIDLE，它向您展示了如何正确地附加事件处理程序，以及如何定义全局变量，而不是闭包中的变量

这应该是你想要的东西的一个很好的起点。
好吧，让我们来看看一些会阻止你的代码工作的问题
var  submit = function () {
  var name = $("name").value; 
  var email = $("email").value;
  var isValid = true;

    //These are all local variables so they won't be accessible any where else. Nor are you really checking anything. This function just sets isValid = true locally.
}

这并不是定义事件侦听器或函数的正确方法。我真的不确定你来这里干什么。。如果这应该附加到表单的提交事件，那么您可能需要查看onsubmit
属性

如果您只是想要一个全局函数，您应该这样定义它：
function submit() { 
    //Insert code here
}


这没有附加到任何内容，它将在解析脚本时运行一次，然后再也不会运行
而且它看起来好像name\u error
实际上不存在于您的HTML中，所以这当然找不到任何东西
//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();
}

这里也是一样，当脚本加载时，您可以任意运行这个脚本。实际上没有检查任何东西
//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();
}

与其他代码一样，此代码将运行一次。检查isValid
是否为true，因为您的isValid
变量无法全局访问，因此不会为true。如果它神奇地可用，它将自动提交您的表单

下面是一个基本的JSFIDLE，它向您展示了如何正确地附加事件处理程序，以及如何定义全局变量，而不是闭包中的变量

这应该是你想要的东西的一个很好的起点。
以下是你如何做到这一点的更清晰版本：
$("#emailform").submit(function(e)
{
   var isValid = Validate();
   if(!isValid)
   {
       e.preventDefault();   
   }
});


function Validate()
{
    var isValid = true;
    if($.trim($("#name").val()) == "")
    {       
        isValid = false;
        $("#name_error").text("Name is required.");
    }
    else
        $("#name_error").text("");


    if($.trim($("#email").val()) == "")
    {      
        isValid = false;
        $("#email_error").text("Email is required.");
    }
    else
        $("#email_error").text("");


    return isValid;   

}

<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>&nbsp;</td>  
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post" action="form.html">Name:<br> 
    <div id="name_error"></div>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<div id="email_error"></div>
<input id = "email" name="textname" size=35><br><br>

<input type="submit" name="button1" value="Submit">
</form>
</td>
</tr>
</center>

$（“#emailform”）.submit（函数（e）
{
var isValid=Validate（）；
如果（！isValid）
{
e、 预防默认值（）；
}
});
函数验证（）
{
var isValid=true；
if（$.trim（$（“#name”）.val（））==“”）
{       
isValid=false；
$（“#name_error”）.text（“需要名称”）；
}
其他的
$（“#名称错误”）.text（“”）；
if（$.trim（$（“#email”）.val（））==“”）
{      
isValid=false；
$（“#电子邮件错误”）。文本（“需要电子邮件”）；
}
其他的
$（“#电子邮件错误”）。文本（“”）；
返回有效；
}


假期有限责任公司



名称：



电子邮件：





Fiddle:
以下是更简洁的版本，介绍了如何操作：
$("#emailform").submit(function(e)
{
   var isValid = Validate();
   if(!isValid)
   {
       e.preventDefault();   
   }
});


function Validate()
{
    var isValid = true;
    if($.trim($("#name").val()) == "")
    {       
        isValid = false;
        $("#name_error").text("Name is required.");
    }
    else
        $("#name_error").text("");


    if($.trim($("#email").val()) == "")
    {      
        isValid = false;
        $("#email_error").text("Email is required.");
    }
    else
        $("#email_error").text("");


    return isValid;   

}

<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>&nbsp;</td>  
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post" action="form.html">Name:<br> 
    <div id="name_error"></div>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<div id="email_error"></div>
<input id = "email" name="textname" size=35><br><br>

<input type="submit" name="button1" value="Submit">
</form>
</td>
</tr>
</center>

$（“#emailform”）.submit（函数（e）
{
var isValid=Validate（）；
如果（！isValid）
{
e、 预防默认值（）；
}
});
函数验证（）
{
var isValid=true；
if（$.trim（$（“#name”）.val（））==“”）
{       
isValid=false；
$（“#name_error”）.text（“需要名称”）；
}
其他的
$（“#名称错误”）.text（“”）；
if（$.trim（$（“#email”）.val（））==“”）
{      
isValid=false；
$（“#电子邮件错误”）。文本（“需要电子邮件”）；
}
其他的
$（“#电子邮件错误”）。文本（“”）；
返回有效；
}


假期有限责任公司



名称：



电子邮件：





小提琴：很明显你是个初学者。所以请不要走错方向。你所做的事情有太多错误，很难知道从哪里开始。首先，您没有使用jquery，但您查找的代码似乎主要是jquery代码。您似乎不知道如何声明函数或将函数用作事件处理程序。您不了解变量范围。您正在尝试为id为“name_error”和“email er”的元素设置值