Question

我确定这是一个非常新手的问题，但我最近刚开始为包含客户端表单验证的表单输入一些代码。在我尝试为此编写javascript / jQuery代码的开头，我的append（）方法只是没有产生任何可见的结果。我已经尝试隔离append（）语句，将id更改为class，查看旧代码，其中我已将段落添加到div中无效。我们非常欢迎所有的建议和提示。

html5代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title></title>
    </head>
    <body>
        <form>
        First name: <input id = "firstName" type="text" name="firstname" value="first name"><br/> 
        Last name: <input id = "lastName" type="text" name="lastname" value="last name"><br/> 
        <div class = "text"><textarea></textarea>
        <p></p> <input type="radio">Master Race Python User
        <p></p> <input type="radio">Imperial Ruby Scum
        </div>

        <div class = "languages">
        <h3>Languages Known</h3>
        <input type="checkbox">Python 
        <input type="checkbox">Ruby
        <input type="checkbox">html
        <input type="checkbox">CSS
        <input type="checkbox">Javascript
        <input type="checkbox">jQuery
        <input type="checkbox">Other
        <input type="checkbox" checked>Filthy casual
        <p><input type ="submit"></p>
        </div>
        <div id = "check">
            <p><strong><em>Check</em></strong></p>
        </div>
        <div class = "response">
            <p></p>
        </div>
        </form>
    </body>
</html>

CSS代码：

.text {
    background-color:#00ffff;
    border:solid black;
    border-radius:3%;
    box-shadow: 5px 5px 5px
}
.languages {
    background-color:#FFFF33;
    border:solid black;
    border-radius:15%;
    box-shadow: 5px 5px 5px;
    margin-top:10px;
}
#check {
    background-color:#ABCDEF;
    border:solid black;
    width:50px;
    margin-left:200px;
    margin-top:10px;
}

.response {
    border:solid black;
    width:190px;
    height:50px;
}

的Javascript / jQuery的：

$(document).ready(function(){
    $(".response").append("<p>"+"Nothing to do, eh?" +"</p>")
    $("#check").click(function(){
        var lastName =("#lastName").val()
        if (lastName === ""){
            $(".response").append("<p>"+"Please submit a valid entry"+"</p>")
        }
    })
})

Answer 1

您的jQuery代码缺少$

这一行：

var lastName =("#lastName").val()

应改为：

var lastName =$("#lastName").val()

http://jsfiddle.net/bxJaV/

Answer 2

您在下面的行中缺少$符号。这是一个拼写错误。

var lastName =("#lastName").val()

相反，它应该是

var lastName =$("#lastName").val();

Answer 3

你是否包括jQuery？您的HTML代码没有可加载jQuery的标记。

尝试添加：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Answer 4

我发现的另一个问题是你已经将值设置为#lastName：

<input id="lastName" type="text" name="lastname" value="last name">

保持值为空并使用占位符。

<input id="lastName" type="text" name="lastname" value="" placeholder = "last name">

Answer 5

原因很简单，如果姓氏字段的值为空，则附加，但在您的标记中，您已设置其值=“姓氏”

因此您的情况不会执行，因此脚本不会附加。

只需从html中的input元素中删除你的值即可。

我为你添加了一个工作代码。希望这会有所帮助...

http://jsbin.com/EDOJEZ/1/edit?html,output

是的，您在下面的陈述中也遗忘了$

var lastName =$("#lastName").val();

我的append（）似乎没有起作用

5 个答案: