2

我确定这是一个非常新手的问题，但我最近才开始为包含客户端表单验证的表单输入一些代码。在我开始尝试为此编写 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>")
        }
    })
})
4

5 回答 5

5

您的 jQuery 代码缺少一个$

这一行：

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

应该改为：

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

http://jsfiddle.net/bxJaV/

于 2013-09-19T17:37:01.993 回答
4

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

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

相反，它应该是

var lastName =$("#lastName").val();
于 2013-09-19T17:37:27.970 回答
4

你包括jQuery吗？您的 HTML 代码没有可以加载 jQuery 的标签。

尝试添加：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
于 2013-09-19T17:38:25.843 回答
0

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

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

将值保留为空并使用占位符。

<input id="lastName" type="text" name="lastname" value="" placeholder = "last name">
于 2013-09-19T17:40:26.780 回答
0

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

所以你的条件不会执行，因此脚本不会附加。

只需从 html 中的输入元素中删除您的值即可。

我为你添加了一个工作代码。希望这可以帮助...

http://jsbin.com/EDOJEZ/1/edit?html，输出

$是的，您在下面的声明中也忘记了

var lastName =$("#lastName").val();
于 2013-09-19T17:40:31.280 回答