Simple form validation help “Cannot read property 'elements' of undefined”

Question

newbie here, im trying to figure out why i get "Cannot read property 'elements' of undefined ".

javascript:

function conf()
{
    for (i=0; i<5; i++)
    {
        box = document.project.elements[i];
        if (!box.value) 
        {
            alert('You haven\'t filled in ' + box.name + '!');
            return false
        }
    }
    return true;
}

html:

<form id="project" onsubmit="return conf()" action="#"> 
    <fieldset>
        <legend>Contact Details</legend>
        <label for="txtname">Your Name:</label> <input type="text" class="text" name="txtname" id="1" /><br/>
        <label for="txtemail">Email:</label> <input type="text" class="text" name="txtemail" id="2"/><br/>
        <label for="txtartist">Artist:</label> <input type="text" class="text" name="txtartist" id="3"/><br/>
        <label for="txtalbum">Song / Album:</label> <input type="text" class="text" name="txtalbum" id="4"/><br/>
        <label for="txtcomments">Comments:</label> <textarea class="ta" name="txtcomments" id="txtcomments" cols="30" rows="20"></textarea><br/>
        <input type="submit" class="buttons" id="btnSubmit" name="btnsubmit" value="Send Enquiry"/>
    </fieldset>
</form>

Answer 1

To get at the form elements you need to use the form id,

document.getElementById('project').elements[i];

a better approach would be use the document.querySelectorAll() and get the elements you are interested in, which would be in this case,

document.querySelectorAll('#project input[type="text"], textarea')

which gives you an array of elements that you could loop through and perform the checks.

BTW, you will probably sooner or later start needing individual checks for each of the inputs. One approach to this would be use the new HTML5 input types .

Answer 2

The approach you have tried should work, since forms with an ID are made named properties of the document object. Perhaps you have another element with a name or id of project .

If the form is the only element with a name or ID of project , you write, formally:

document.forms.project.elements...

or shorter:

document.project.elements... 

But that issue can be avoided. Since you have a submit listener on the form, you can pass a reference to the form directly by passing this :

<form id="project" onsubmit="return conf(this)" action="#">

And within the function (don't forget to declare variables!!):

function conf(form) 
{
    var box;

    for (var i=0; i<5; i++) {
        box = form.elements[i];

        if (!box.value) {
            alert('You haven\'t filled in ' + box.name + '!');
            return false
        }
    }
    return true;
}

Now you can change the form ID to anything (or remove it) and the function still works.

Also, the label element is associated with a form control by ID , not by name so:

<label for="txtalbum">Song / Album:</label> <input ... name="txtalbum" id="4">

should be:

<label for="4">Song / Album:</label> <input ... name="txtalbum" id="4">

Otherwise the label will not be associated with the element (and therefore may as well be a span or similar and not have a for attribute).

Lastly, please don't use XML syntax in an HTML document. In an HTML document, the / in <br /> and <input ... /> is simply ignored.