Why does my javascript not validate my html form?

Question

I am trying to get my form validated with javascript, but it doesnt seem to be working.

Can anyone see where the mistake is in my code ?

This is My HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<script src="js/validation.js"></script>
<title>Form</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
    <fieldset>
        <legend> Please fill out this Form</legend>
        <p>
            <label class="field" for"name"> First name:</label>
            <input type="text" name="fname" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Last name:</label>
            <input type="text" name="lname" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Email:</label>
            <input type="text" name="email" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Phone:</label>
            <input type="text" name="phonenumber" class="textbox-300"/>
        </p>
        <p>
            <label class="field" for"name">Adress:</label>
            <input type="text" name="address" class="textbox-300"/>
        </p>
        <p>
            <input type="submit" value="submit">
        </p>
    </fieldset>
</form>
</body>
</html>

My Java Script code to validate my HTML

function validateForm() {
    var x = document.forms['myForm']['fname'].value;
    var y = document.forms['myForm']['lname'].value;
    var i = document.forms['myForm']['email'].value;
    var j = document.forms['myForm']['phone'].value;
    var address = document.forms['myForm']['address'].value;
    var atpos = i.indexOf("@");
    var dotpos = i.lastIndexOf(".");
    // ______________________________________________
    if (x == null || x == "") {
        alert("First Name must be Entered");
        return false;
    }
    //___________________________________________
    if (y == null || y == "") {
        alert("Last Name must be Entered");
        return false;
    }
    //___________________________________________
    if (parseInt(j) != j) {
        alert("Please enter a correct phone number");
        return false;
    }
    //___________________________________________
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= i.length) {
        alert("Not a valid e-mail address");
        return false;
    }
    //___________________________________________
    if (address == null || address == "") {
        alert("You most enter your Address");
        return false;
    }
}

I've gone over and over it and I cant find the error.

What exactly is happening? And i would recommend using jQuery for that: jquery.com — puelo
– puelo, Commented Nov 7, 2013 at 10:14
Another error: You have "phone" in javascript and "phonenumber" in HTML. — radonys
– radonys, Commented Nov 7, 2013 at 10:20

lonesomeday · Accepted Answer · 2013-11-07 10:26:39Z

3

First, in future please try to reduce your code to a small example, rather than plonking the whole page in the question. A nice way to do this is with jsFiddle.

Second, please make your code valid! I've gone through and corrected your broken HTML, e.g. the various bits like for"name" in your code that should be for="name".

Third, after fixing this, it was clear that the problem (which is shown in your browser console, the key thing for debugging Javascript) was that you were trying to get the value of undefined. That means that, somewhere, you were calling value on something that didn't exist.

Looking through your Javascript and comparing it to your HTML, we see this contrast:

HTML

<p>
    <label class="field" for"name">Phone:</label>
    <input type="text" name="phonenumber" class="textbox-300" />
</p>

Javascript

var j = document.forms['myForm']['phone'].value;

Do you see the problem? Your element has the name phonenumber, while you were accessing phone. If you change the code to document.forms['myForm']['phonenumber'].value, it works fine.

Here is your code in a working jsFiddle.

Lastly, of course, your main problem can be summarised as "reinventing the wheel". What you are doing has been implemented so many times before (and many times better to boot). Look into frameworks that will do the work for you, and especially modern ones that make use of the form validation built into HTML5.

edited Nov 7, 2013 at 10:26

answered Nov 7, 2013 at 10:21

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

4 Comments

MarsOne Over a year ago

Dont you think you deserve a fee for this ;)

Wagner Maximiliano Over a year ago

im only after my 6th class in college of web dev, i dont know what jsFiddle even is or does :) but thanks any ways, still doesnt give me my alerts when i dont input it propperly so still not fixed even after i corrected wht u said

lonesomeday Over a year ago

@WagnerMaximiliano Look in your browser's console. It will give you errors that explain why your code isn't working.

Wagner Maximiliano Over a year ago

Yeah i got it now Thx Very much !!

Nono · Accepted Answer · 2013-11-07 10:30:54Z

0

Just change Java Script code:

var j = document.forms['myForm']['phone'].value;

With

var j = document.forms['myForm']['phonenumber'].value;

Here is your Luck (JsFiddle)

answered Nov 7, 2013 at 10:30

Nono

7,4024 gold badges42 silver badges41 bronze badges

Collectives™ on Stack Overflow

Why does my javascript not validate my html form?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related