-1

我试图让我的表单验证内联，但似乎无法获得正确的语法，目前我有这个，它什么也没做。第一个函数 formhandler 旨在在元素变得模糊时更改 span 元素文本，并在字段聚焦时删除错误文本，而此时它不执行这些操作。

<html>
<script type = "text/javascript">
document.getElementById("form").onfocus = function formHandler()    {
    for(var i = 0; i < document.getElementById("form").length; i+=1){
        if(document.getElementById("form").elements[i].type == 'text') {
            if(document.getElementById("form").elements[i].focus()) {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "";
                valid = true;
            }
            else if(document.getElementById("form").elements[i].blur()) {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "Please Fill in Field";
                valid = false;
            }
        }
    }
}
function validate() {
    var valid = false;
    for(var i = 0; i < document.getElementById("form").length; i+=1){
        if(document.getElementById("form").elements[i].type == 'text') {
            if(document.getElementById("form").elements[i].value == "") {
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "Please Fill in Field";
                valid = true;
            }
            else{
                var onode = document.getElementById("form").elements[i].nextSibling;
                onode.innerHTML = "";
                valid = false;
            }
        }
    }
}

document.getElementById("form").onsubmit = validate;
</script>
<head>
    <title>Question 1 / Vraag 1 - Basic JavaScript Validaton / Basiese JavaScript validasie
    </title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form method="get" action="" id = "form">
    <table>
    <tr>
    <td> Firstname:</td>
    <td> <input type="text" name="firstname" id="firstname" /><span id="fnError">
    </span></td>
    </tr>
    <tr>
    <td> Surname:</td>
    <td> <input type="text" name="surname" id="surname" /><span id="snError">
    </span></td>
    </tr>
    <tr>
    <td> Age:</td>
    <td> <input type="text" name="age" id="age" /><span id="aError">
    </span></td>
    </tr>
    <tr>
    <td>  Email:</td>
    <td><input type="text" name="email" id="email" /><span id="eError">
    </span></td>
    </tr>
    <tr><td colspan="2"><input type="button" value="Validate" onclick = "validate()"/></td></tr>
    </table>
    </form>
</body>
</html>

我试图在不使用 jquery 的情况下实现这一点，所以请不要建议它，在此先感谢。

4

3 回答 3

2

这些是我在您的代码中发现的问题：

  • 第 1 行：表单没有.focus方法。你这样做是什么意思？

  • 第 2 行：更改.length为.elements：

    for (var i = 0; i < document.getElementById("form").elements.length; i++ ) {
    var node = document.getElementById("form").elements[i];
    ...

    表单中的元素现在别名为node.

  • 第 4 行：如果元素失焦， .focus/.blur方法不会返回 true。我们将不得不自己做：

    node.onfocus = function() { this.isInFocus = true; };
node.onblur  = function() { this.isBlurred = !this.isInFocus; };

    结果代码如下：

    if ( node.isInfocus ) { ... }

else if ( node.isBlurred ) { ... }

  • 第 9 行：参见上文。

  • 将代码包装在 awindow.onload中，以便在 DOM 加载后能够使用 DOM 元素。

这是您修改后的代码；请让我知道这对你有没有用：

var nodes = document.getElementById('form').elements, node;

for ( var i = 0; i < nodes.length; i++ ) (function(i) {

    nodes[i].onfocus = function() { this.isInFocus = true; };
    nodes[i].onblur  = function() { this.isBlurred = !this.isInFocus; };

})(i);


for (var i = 0; i < nodes.length; i++) {
    node = nodes[i];
    if (node.type == 'text') {
        if (node.isInFocus) {
            var onode = node.nextSibling;
            onode.innerHTML = "";
            valid = true;
        } else if (node.isBlurred) {
            var onode = node.nextSibling;
            onode.innerHTML = "Please Fill in Field";
            valid = false;
        }
    }
}
于 2012-11-22T01:41:43.043 回答
0

第一个主要问题：您试图在初始脚本加载中完成所有这些。那时主 DOM 尚未加载，因此 document.getElementById("form") 不会找到任何东西。在 onload 处理程序中执行函数定义。

此外，不确定您期望在第一个函数中绑定什么“有效”。最后，一旦你确定了有效性与否，你需要对结果做一些事情。

于 2012-11-22T01:20:13.013 回答
0

您正在引用尚不存在的 dom 元素。一种解决方案是将所有<script>标签移到之前</body>，以便在执行脚本时存在元素。另一种方法，使用纯 javascript 将执行此操作：

<script>
window.onload = function(){
   //All your code here
}
</script>

（validate如果您愿意，该功能可以在外面）

干杯

于 2012-11-22T01:24:44.577 回答