Javascript 内联表单验证_Javascript_Forms_Validation

Javascript 内联表单验证

javascript forms validation

Javascript 内联表单验证,javascript,forms,validation,Javascript,Forms,Validation,我正试图让我的表单进行内联验证，但似乎无法获得正确的语法，目前我已经有了它，但它还没有做任何事情。第一个函数formhandler用于在元素变得模糊时更改span元素文本，并在字段聚焦时删除错误文本，此时它不执行这两项操作 <html> <script type = "text/javascript"> document.getElementById("form").onfocus = function formHandler() { for(var i =

我正试图让我的表单进行内联验证，但似乎无法获得正确的语法，目前我已经有了它，但它还没有做任何事情。第一个函数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>


document.getElementById（“表单”）.onfocus=函数formHandler（）{
对于（var i=0；i


我试图在不使用jquery的情况下实现这一点，所以请不要建议，提前谢谢。
第一个主要问题：您正在尝试在初始脚本加载中完成所有这一切。主DOM当时尚未加载，因此document.getElementById（“表单”）找不到任何内容。在onload处理程序中执行函数定义
另外，不确定您希望在第一个函数中绑定到什么“valid”。最后，一旦确定了有效性与否，就需要对结果进行处理。
您引用的是尚不存在的dom元素。一种解决方案是将所有的
标记移到之前，这样在执行脚本时元素就存在了。
使用纯javascript的另一种方法是：
<script>
window.onload = function(){
   //All your code here
}
</script>


window.onload=函数（）{
//所有代码都在这里
}

（如果需要，validate
功能可以在外部）
干杯
这些是我在您的代码中发现的问题：

第1行：表单没有.focus
方法。你这是什么意思
第2行：将.length
更改为.elements
：
for (var i = 0; i < document.getElementById("form").elements.length; i++ ) {
    var node = document.getElementById("form").elements[i];
    ...

生成的代码如下所示：
if ( node.isInfocus ) { ... }

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


第9行：参考上文
在窗口中包装代码。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;
        }
    }
}

var nodes=document.getElementById（'form'）。元素，节点；
对于（var i=0；i
似乎无法获得正确的语法：您能详细说明吗？它做错了什么？有什么不对的？源代码中有什么地方可以缩小问题的范围吗？@David sorry，第一个函数，formhandler用于在元素变得模糊时更改跨度元素文本，并在字段聚焦时删除错误文本。尝试调试或在两者之间放置警报，查看其中断位置。检查语法错误。我正在准备我的答案。可能需要一段时间！我尝试了一些类似的东西，但仍然没有给我想要的效果。我测试了它，它工作了。所以你应该解释一下想要的效果是什么。正如你所说，我把formHandlers代码放在window.onload函数中。但在我看来，它没有按照我的意愿实现模糊和聚焦的内联错误检查。我删除了有效的var，因为它没有声明，但它似乎仍然不起作用。@Crossman代码不起作用，因为你在
元素上有一个.onfocus
事件处理程序。为什么？表单没有.onfocus处理程序。你打算怎么做？我删除了它，但我不知道如何将代码概括到所有表单元素first@Crossman您必须设置一个提交按钮来检查用户是否正确填写了所有表单元素。单击submit按钮时，它应该运行我给您的for循环中的代码。但是，当您通过按钮单击表单的sumbit时，焦点将离开所有元素，因此无需检查一个元素是否处于焦点。只需逐一检查所有元素是否填写正确。回答得很好，@David+（如果我能；）
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;
        }
    }
}