Question

您好，

我正在尝试开发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：

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/

Answer 1

很明显，你是初学者。所以请不要采取错误的方式。你所做的事情有很多错误，很难知道从哪里开始。首先，你没有使用jquery，但看起来你正在查找如何执行此操作的代码主要是jQuery代码。您似乎不知道如何声明函数或将函数用作事件处理程序。你不了解变量范围。您正在尝试为名称为＆＃39; name_error＆＃39;的元素设置值。和＆＃39;电子邮件错误＆＃39;但这些元素并不存在于您的HTML中。除了javascript问题之外，您还在为页面使用表格布局。帮自己一个忙，学习CSS并使用div而不是表格。

这是您表单的工作验证（非jQuery）。我还建议你学习jQuery，因为它是javascript的未来（实际上是现在）。

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;
}

Answer 2

尝试删除var功能中的submit()字词。 var告诉javascript引擎这个变量的范围在函数内部，所以在另一个函数中不存在。删除var您将变量附加到全局window对象。它不能在严格模式下工作，但你没有定义它，因此它适用于你

Answer 3

好吧让我们解决一些阻止你的代码工作的问题..

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属性

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

如果您只是想要一个全局函数，那么您应该这样定义它：

function submit() { 
    //Insert code here
}

//validate entry for "Name:"
if (name == "") {
  $("name_error").firstChild.nodeValue = "Name is required.";
  isValid = false;
} else {
    $("name_error").firstChild.nodeValue = "";
}

这不会附加到任何内容，它会在解析脚本时运行一次，然后再也不会运行。

看起来name_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();
}

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

这是一个基本的jsfiddle，向您展示如何正确附加事件处理程序以及在闭包中定义全局变量而不是变量。

http://jsfiddle.net/pbu78npx/1/

这应该是你想要的一个很好的起点。

Answer 4

以下是如何做到这一点的更清晰版本：

$("#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>

小提琴：http://jsfiddle.net/gy1oj8dz/2/

如何使用Javascript If-Statements

4 个答案: