Home/ Questions/Q 8866559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:49:00+00:00

I’m trying to get my form to validate inline but can’t seem to get

  • 0

I’m trying to get my form to validate inline but can’t seem to get the right syntax, at the moment I have this, which does nothing yet. The first function, formhandler is meant to change the span elements text if the element gets blured and take away the error text once the field is focused at the moment it does neither of these.

<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>

I’m trying to achieve this without the use of jquery, so please don’t suggest it, thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    These are problems I found in your code:

    • Line 1: Forms don’t have a .focus method. What did you mean for that to do?

    • Line 2: Change .length to .elements:

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

      The elements in the form are now aliased as node.

    • Lines 4: The .focus/.blur method doesn’t return true if the element is out of focus. We’re going to have to do it ourselves:

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

      The resulting code is as follows:

      if ( node.isInfocus ) { ... }

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

    • Line 9: Refer to above.

    • Wrap the code in a window.onload to be able to use the DOM elements when the DOM has loaded.

    This is your revised code; let me know if it works for you:

    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;
        }
    }
}
    • 0