Basic Javascript validation

Question

This is a really simple problem. I had this working and then i must of changed something and now it doesn't work. Its just a peice of JS code checking for an empty string. Here is the code below. It's been driving me mad for 20 minutes trying to figure out what is wrong with this ridicliously simple code.

 <script  type="text/javascript">
 function validateForm(){
 var email= document.getElementById('email').value;
 if (email.length==''){
 alert("please fill out email");}}
    </script>

<form name="contact" method="post" action='ContactPHP.php'>
Your Email: <input name='email' type='text' /><br />
<input type="button" value="submit" onClick="validateForm()"/>
 </form>

It's easy to confuse name and id attributes. Make a habit of always putting both — colithium
– colithium, Commented Jul 27, 2011 at 20:40

Brandon · Accepted Answer · 2011-07-27 20:38:52Z

3

Your javascript calls getElementById('email') but your input does not have an id of 'email'.

Assign an id to it.

<input name='email' id='email' type='text' />

answered Jul 27, 2011 at 20:38

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

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

Comments

James Allardice · Accepted Answer · 2011-07-27 20:45:09Z

2

email.length does not return a string. You are comparing it to an empty string. Either use email == "" or email.length > 0.

Additionally, your input element has name "email", but you're looking for an element with id "email".

Here's the full (corrected) snippet:

<script  type="text/javascript">
    function validateForm(){
        var email= document.getElementById('email').value;
        if(email.value == '') {
            alert("please fill out email");
        }
    }
</script>

<form name="contact" method="post" action='ContactPHP.php'>
    Your Email: <input id='email' name='email' type='text' /><br />
    <input type="button" value="submit" onClick="validateForm()"/>
</form>

edited Jul 27, 2011 at 20:45

answered Jul 27, 2011 at 20:39

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Comments

Robot Woods · Accepted Answer · 2011-07-27 20:38:58Z

0

you have name='email' but are looking for the element with the ID of email...just add id='email' to your text input

answered Jul 27, 2011 at 20:38

Robot Woods

5,6872 gold badges24 silver badges30 bronze badges

Comments

Jaime · Accepted Answer · 2011-07-27 20:39:35Z

0

Your input for the email does not have an Id="email"

answered Jul 27, 2011 at 20:39

Jaime

6,8142 gold badges29 silver badges43 bronze badges

Comments

mrk · Accepted Answer · 2011-07-27 20:40:15Z

0

You don't want to use document.getElementById here.

Try this:

function validateForm(form){ var email= form.email.value; if (email.length==''){ alert("please fill out email");}} Your Email:

answered Jul 27, 2011 at 20:40

mrk

5,1273 gold badges29 silver badges42 bronze badges

Comments

Icarus · Accepted Answer · 2011-07-27 21:54:44Z

0

I am too lazy to check but I have the impression that even if the validation fails the form will submit because the javascript function does not return false;

I woudl return false after the alert('yadda yadda'); and change the onclick event handler to:

onclick="return validateForm();"

answered Jul 27, 2011 at 21:54

Icarus

64k14 gold badges102 silver badges116 bronze badges

Collectives™ on Stack Overflow

Basic Javascript validation

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related