CODEWITHSUNDEEP
javascripthtmlformsvalidation
Wagner Maximiliano
Wagner Maximiliano

Reputation: 9

Why does my javascript not validate my html form?

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.

Upvotes: 0

Views: 826

Answers (2)

Nono
Nono

Reputation: 7302

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)

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237865

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.

Upvotes: 3

Related Questions