Why is my Javascript validation not working?

Question

<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var username = document.getElementByName('username');
var password = document.getElementByName('password');
var email = document.getElementByName('email');

// Check each input in the order that it appears in the form!
    if(isAlphanumeric(username, "Please only use letters and numbers for you username.")){
        if(lengthRestriction(username, 8, 12)){
            if(lengthRestriction(password, 6, 15)){
                if(emailValidator(email, "Please enter a valid email address")){
                            return true;
                }
            }
        }
    }


return false;
}


function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
    return true;
}else{
    alert(helperMsg);
    elem.focus();
    return false;
}
}

function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
    return true;
}else{
    alert("Please enter between " +min+ " and " +max+ " characters");
    elem.focus();
    return false;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
    return true;
}else{
    alert(helperMsg);
    elem.focus();
    return false;
}
}

My script isn't working, even though the username, password and email text boxes have defined the name attribute. Thanks :).

Answer 1

document.getElementByName('username'); return array or elements with name username... so add index too... ie document.getElementByName('username')[0];

it should be like:

var username = document.getElementByName('username')[0];
var password = document.getElementByName('password')[0];
var email = document.getElementByName('email')[0];

Answer 2

getElementByName isn't a valid method for the document object. You want getElementsByName, which will return a collection of elements with the specified name attribute, or getElementById() which will return a single element with the specified id attribute.

// get the first element with name="username"
var username = document.getElementsByName('username')[0];

// get the first element with name="password"
var password = document.getElementsByName('password')[0];

// get the first element with name="email"
var email = document.getElementsByName('email')[0];

Answer 3

There is no DOM method "getElementByName", you may wish to consider using getElementById or getElementsByName

Answer 4

The method is called getElementsByName (please note the missing s in your code) and, as the plural form suggests, it returns an array with all the matching elements. If you only have one item per name, you can simply fetch the first item from the array.

Now, this method returns the DOM node. If you don't know what a node is, just think of it as the HTML tag. You can't validate a tag, you need to extract its value attribute.

These changes would get reflected as follows (with no error checking):

var username = document.getElementByName('username')[0].value;
var password = document.getElementsByName('password')[0].value;
var email = document.getElementsByName('email')[0].value;

Is suggest you find the JavaScript console of your browser so you can get notified about syntax errors or, even better, use Firefox + Firebug.