Home/ Questions/Q 6576043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:27:43+00:00

script : window.onload = initForms; function initForms() { for (var i=0; i< document.forms.length; i++)

  • 0

script :

window.onload = initForms;

function initForms() {
for (var i=0; i< document.forms.length; i++) {
    document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");

for (var i=0; i<allTags.length; i++) {
    if (!validTag(allTags[i])) {
        allGood = false;
    }
}
return allGood;

function validTag(thisTag) {
    var outClass = "";
    var allClasses = thisTag.className.split(" ");

    for (var j=0; j<allClasses.length; j++) {
        outClass += validBasedOnClass(allClasses[j]) + " ";
    }

    thisTag.className = outClass;

    if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();
        if (thisTag.nodeName == "INPUT") {
            thisTag.select();
        }
        return false;
    }
    return true;

    function validBasedOnClass(thisClass) {
        var classBack = "";

        switch(thisClass) {
            case "":
            case "invalid":
                break;
            case "reqd":
                if (allGood && thisTag.value == "") {
                    classBack = "invalid ";
                }
                classBack += thisClass;
                break;
            default:
                classBack += thisClass;
        }
        return classBack;
    }
}
}

This code is meant to check if the user entered the required fields in the HTML form.If the user leaves the required field the field is marked with color.

In the above code what does the function validTag(thisTag) is do ? What is the identifier invalid ? This is not declared anywhere in the HTML file.In case here is the HTML file :

<html>
<head>
<title>Car Picker</title>
<script type="text/javascript" src="script.js"></script>    
<link rel="stylesheet" href="script.css" />
</head>
<body>
<h2 align="center">Car Picker</h2>
<form action="#">
<p>
    <label for="emailAddr">Enter your email address:&nbsp;&nbsp;&nbsp;&nbsp;  <input id="emailAddr" type="text" size="30" class="reqd email" />
    </label></br />
    <label for="emailAddr2">Re-enter your email address:<input id="emailAddr2" type="text" size="30" class="reqd emailAddr" />
    </label>
</p>
<p><label for="color">Colors:
    <select id="color" class="reqd">
        <option value="" selected="selected">Choose a color</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
    </select>
</label></p>
<p>Options:
    <label for="sunroof"><input type="checkbox" id="sunroof" value="Yes" />Sunroof (Two door only)</label>
    <label for="pWindows"><input type="checkbox" id="pWindows" value="Yes" />Power Windows</label>
</p>
<p><label for="DoorCt">Doors:&nbsp;&nbsp;
    <input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio" />Two
    <input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio" />Four
</label></p>
<p><input type="submit" value="Submit" />&nbsp;<input type="reset" /></p>
    </form>
    </body>
    </html>

The css file :

body {
color: #000;
background-color: #FFF;
}

input.invalid {
background-color: #FF9;
border: 2px red inset;
}

label.invalid {
color: #F00;
font-weight: bold;
}

select {
margin-left: 80px;
}

input {
margin-left: 30px;
}

input+select, input+input {
margin-left: 20px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the reqd class is set, the validBasedOnClass function returns the class name invalid if the specified control is empty. In this case, that class is added to the control.
    If the class invalid is added, the control gets the focus too.

    So it’s basically a form validator that ensures that all inputs with the class reqd should be filled before the form is posted.

    But where did you get this code from, if you apparently don’t know what it does? It seems quite unstructured code too. I wouldn’t use it.

    • 0