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 :).

"Not working" is not a very helpful description of the problem. Try adding some information about where it is going wrong and what messages you are seeing when you run the script. — Paul Butcher
– Paul Butcher, Commented Jun 7, 2010 at 10:18
But I am not receiving any error messages, and I have detailed the problem. The JavaScript validation is not validating..not working? What would be a better title? — Sam
– Sam, Commented Jun 7, 2010 at 10:22
Perhaps something like: "My JavaScript validation function does not prevent submission of invalid data", although the problem is most likely "My JavaScript validation function triggers syntax errors" ;-) Welcome to StackOverflow. — Álvaro González
– Álvaro González, Commented Jun 7, 2010 at 10:25
Running this script in IE, for example, gives the message "Object doesn't support this property or method" on the first line. Try to find out where it isn't working. Turn on script debugging in your browser and trace the execution of the function - look at the values of the variables as you pass through. — Paul Butcher
– Paul Butcher, Commented Jun 7, 2010 at 10:31

Andy E · Accepted Answer · 2010-06-07 10:12:09Z

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

answered Jun 7, 2010 at 10:12

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam Over a year ago

Alright. It is possible to use multiple classes on one class E.G. class="contact-input contact-left", right?

Andy E Over a year ago

@Sam: yes. In fact, it's the only way to apply multiple classes to a single element.

Paul Butcher · Accepted Answer · 2010-06-07 10:15:20Z

2

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

answered Jun 7, 2010 at 10:15

Paul Butcher

6,95630 silver badges40 bronze badges

Comments

KoolKabin · Accepted Answer · 2010-06-07 10:10:00Z

0

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

answered Jun 7, 2010 at 10:10

KoolKabin

17.8k37 gold badges113 silver badges145 bronze badges

1 Comment

Sam Over a year ago

I've changed my code to.. var username = document.getElementByName('username')[0]; var password = document.getElementByName('password')[0]; var email = document.getElementByName('email')[0]; is this right?

Álvaro González · Accepted Answer · 2010-06-07 10:23:07Z

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.

Collectives™ on Stack Overflow

Why is my Javascript validation not working?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related