Question

我试图让我的表单验证内联，但似乎无法获得正确的语法，此时此刻我还没有做任何事情。第一个函数是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的情况下实现这一目标，所以请不要提前建议，提前谢谢。

Answer 1

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

第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行：请参阅上文。
将代码包装在window.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;
        }
    }
}

Answer 2

第一个主要问题：您正在尝试在初始脚本加载中执行所有这些操作。主DOM尚未加载，因此document.getElementById（“form”）将找不到任何内容。在onload处理程序中执行函数定义。

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

Answer 3

您正在引用尚不存在的dom元素。一种解决方案是在<script>之前移动所有</body>标记，以便在执行脚本时存在元素。另一种方法，使用纯javascript就可以做到这一点：

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

（validate函数可能在外面，如果你想要的话）

干杯

内联表单验证

3 个答案: