Question

如果我必须以不同的方式发布，请告诉我，但我上传了我正在使用的三个文件。我是jQuery和javascript的新手，但在我的课程中我应该能够运行这个文件组合，当我运行这个HTML文件时应该发生的事情是当我点击＆＃34;提交＆＃34 ;在表单底部没有输入任何文本区域，它应该返回一条错误信息和一个小感叹号。

目前，它根本没有返回任何东西。 .css文件加载正常，并将我的表单更改为它应该是什么样的，但不是.js文件。我想知道它是否与html文件的head部分中的脚本标记有关？

对于上下文，我自己从书中的说明中写了大部分内容，但显然学校将完整的代码提供给单独的文件，格式比我的更清晰，所以我只是用你在这里看到的内容取而代之。在本书或我的教授（祝你好运，他没有回复电子邮件）中没有澄清的主要部分是在标题部分加载Jquery / javascript文件的信息。我正在使用phoneGap来模拟这个网页。

＆＃13;

var errors = {};

function displayErrors() {
    // initialise variables
    var haveErrors = false;
    
    // remove the invalid class for all inputs
    $(":input.invalid").removeClass("invalid");
    
    // iterate through the fields specified in the errors array
    for (var fieldName in errors) {
        haveErrors = true;
        $("input[name='" + fieldName + "']").addClass("invalid");
    } // for
    
    // if we have errors, then add a message to the errors div
    $("#errors")
        .html(haveErrors ? "Errors were found." : "")
        .css("display", haveErrors ? "block" : "none");
} // displayErrors

function displayFieldErrors(field) {
    var messages = errors[field.name];
    if (messages && (messages.length > 0)) {
        // find an existing error detail section for the field
        var errorDetail = $("#errordetail_" + field.id).get(0);

        // if it doesn't exist, then create it 
        if (! errorDetail) {
            $(field).before("<ul class='errors-inline' id='errordetail_" + field.id + "'></ul>");
            errorDetail = $("#errordetail_" + field.id).get(0);
        } // if
        
        // add the various error messages to the div
        for (var ii = 0; ii < messages.length; ii++) {
            $(errorDetail).html('').append("<li>" + messages[ii] + "</li>");
        } // for
    } // if
} // displayFieldErrors

$(document).ready(function() {
    $(":input").focus(function(evt) {
        displayFieldErrors(this);
    }).blur(function(evt) {
        $("#errordetail_" + this.id).remove();
    });
    
    $("#taskentry").validate({
        submitHandler: function(form) {
            // TO BE COMPLETED IN THE NEXT CHAPTER
        },
        showErrors: function(errorMap, errorList) {
            // initialise an empty errors map
            errors = {};
            
            // iterate through the jQuery validation error map, and convert to 
            // something we can use
            for (var elementName in errorMap) {
                if (! errors[elementName]) {
                    errors[elementName] = [];
                } // if
                
                errors[elementName].push(errorMap[elementName]);
            } // for
            
            // now display the errors
            displayErrors();
        }
    });
});

＆＃13;

body {
    margin: 0px;
    min-height: 480px;
    font-family: Arial;
}

form ul {
    margin: 0px;
    padding: 6px;
    list-style-type: none;
}

form ul li {
    margin: 0 0 4px 0;
    -webkit-border-radius: 4px;
    border: 1px solid #666666;
    padding: 4px;
}
 
form ul li.naked {
    -webkit-border-radius: 0px;
    border: 0;
    padding: 0;
}

input, textarea {
    -webkit-appearance: none;
    border: 0;
    width: 99%;
}

input.invalid, textarea.invalid {
    background: url(exclamation.png) no-repeat 2px 2px;
    padding-left: 22px;
}

#errors {
    margin: 8px 6px 2px 6px;
    padding: 6px 14px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #cc0000), color-stop(0.7, #770022));
    -webkit-border-radius: 4px;
    color: white;
    display: none;
}

ul.errors-inline li {
    border: 0px;
    color: red;
    padding: 0px;
}

input[type=submit] {
    border: 1px solid white;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
    -webkit-border-radius: 6px;
    -webkit-box-shadow: 0 0 4px #333333;
    width: 100%;
    padding: 6px;
}

h1.simple {
    font-size: 0.9em;
    padding: 8px 4px 4px 8px;
    background: #333333;
    color: #AAAAAA;
    border-bottom: 2px solid #AAAAAA;
    margin: 0 0 4px 0;
}

h1.fancy {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000));
    -webkit-box-shadow: 0 2px 1px #AAAAAA;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    font-size: 1.1em;
    color: white;
    padding: 10px 8px;
    margin: 0 6px 6px 6px;
    text-align: center;
}

＆＃13;

<html>
<head>
    <title>Simple Mobile Web Page</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="screen" href="todolist.css" />
    <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.validate.js"></script>
	<script type="text/javascript" src="todolist.js"></script>
</head>
<body>

    <h1 class="fancy">Christopher Hughes To Do List</h1>
        Hello World!
    <p>
        This is just the beginning!
    </p>
    <span class="highlight">
       More to come!
    </span>
    <h1 class="fancy">Create Task</h1>
	<div id="errors"></div>
    <form id="taskentry">
    <ul>
        <li><input type="text" name="task[name]" id="taskname" placeholder="Task Name"/></li>
        <li>
            <textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
        </li>
        <li><input type="text" name="task[due]" id="taskdue" placeholder="Task Due" /></li>
        <li class="naked"><input type="submit" name="Save" /></li>
    </ul>
    </form>
</body>
</html>

＆＃13;

想知道为什么我的javascript文件在运行phonegap时没有加载？

0 个答案: