Javascript Validation doesn't work

Question

I am new to javascript and I am attempting to create a simple form validation. When I hit the submit button nothing happens. I have been looking at examples for a while and I cannot seem to figure out where I am going wrong. Any suggestions:

HTML:

        <form name="myForm" class="appnitro" onsubmit="return validateForm()" action="mysql_connection.php" method="post">
            <div class="form_description">
                 <h2>Patient Record</h2>

                <p></p>
            </div>
            <ul>
                <li id="li_1">
                    <label class="description" for="element_1">&nbspName</label> 

        <span>
                <td width="68%"><input size="15" maxlength="30" class="input" type="text" name="Fname" id="Fname"></td>
                <label>First</label>
        </span>


        <span>
                <td width="68%"><input size="15" maxlength="30" class="input" type="text" name="Lname" id="Lname"></td>
                <label>Last</label>
        </span>

                    <li class="buttons">
                        <label class="description" for="element_1">&nbspGender</label> 

        <span>
                        <tr>
                    <select name="Gender"> 
                        </tr>
        </span>

                        <option value="Select">Select</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                        </select>
                        <li class="buttons">
                            <label class="description" for="element_3">&nbspAge</label> 

        <span>
                        <tr>
                    <select name="Age"> 
                        </tr>
        </span>

                            <script type="text/javascript">
                                listAge()
                            </script>
                            </select>
                            <li class="buttons">
                                <label class="description" for="element_3">&nbspPhone Number</label> 
        <span>
                 <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Phone" id="Phone"></td>
        </span>

                                <li class="buttons">
                                    <label class="description" for="element_3">&nbspEmail ID</label> 

        <span>
                <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Email" id="Email"></td>
        </span>

                                    <li class="buttons">
                                        <label class="description" for="element_3">&nbspAddress</label> 

        <span>
        <td><textarea cols="25" rows="3" class="input" name="Address" id="Address"></textarea></td>
        </span>

                                        <li class="buttons">
                                            <label class="description" for="element_3">&nbspReason For Visit</label> 

        <span>
        <td><textarea cols="25" rows="3" class="input" name="Reason" id="Reason"></textarea></td>
        </span>

                                            <li class="buttons">
                                                <label class="description" for="element_3">&nbspAttending Doctor</label> 

        <span>
        <td width="68%"><input size="25" maxlength="50" class="input" type="text" name="Doctor" id="Doctor"></td>
        </span>

                                                <li class="buttons">
                                                    <input type="submit" value="Submit" />
                                                    <input type="reset" value="Reset">
                                                </li>
            </ul>
        </form>

Javascript:

    <script>
        function validateForm() {
            var Fname = document.forms["myForm"]["Fname"].value;
            var Lname = document.forms["myForm"]["Lname"].value;
            var Phone = document.forms["myForm"]["Phone"].value;
            var Address = document.forms["myForm"]["Address"].value;
            var Reason = document.forms["myForm"]["Reason"].value;
            var Doctor = document.forms["myForm"]["Doctor"].value;

            var email = document.forms["myForm"]["email"].value;
            var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");

            if (Fname == null || Fname == "") {
                alert("First name must be filled out");
                return false;
            }
            if (Lname == null || Lname == "") {
                alert("Last name must be filled out");
                return false;
            }
            if (Phone == null || Phone == "") {
                alert("Phone Number must be filled out");
                return false;
            }
            if (Address == null || Address == "") {
                alert("Address must be filled out");
                return false;
            }
            if (Reason == null || Reason == "") {
                alert("Reason for Visit must be filled out");
                return false;
            }
            if (Doctor == null || Doctor == "") {
                alert("Attending Doctor must be filled out");
                return false;
            }
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                alert("Not a valid e-mail address");
                return false;
            }

        }

        function listAge() {
            var i = 1;

            for (i = 1; i <= 100; i++) {
                document.write("<option value=" + i + ">" + i + "</option>");
            }
        }
    </script>

It's very strange that nothing happens. I would expect either an alert or a submit. Do you get an Error in your console? Also, one minor nitpick: .value will always return a string, no need to check for null. — Halcyon
– Halcyon, Commented Nov 6, 2013 at 15:03
This is probably unrelated to your question but what generated your html? You surely didn't write that by hand, did you? what are the <tr> and <td> for? Look at gender button? — kush
– kush, Commented Nov 6, 2013 at 15:09
First of correct your html. There is labels which points to same id. Second in <script type="text/javascript"> listAge() </script> — Khamidulla
– Khamidulla, Commented Nov 6, 2013 at 15:09

Quentin · Accepted Answer · 2013-11-06 15:11:44Z

3

Your HTML is hideously invalid. Odds are that the browser is trying to perform error recovery and doing things like moving the <form> element outside the table (assuming there is a table, it doesn't show up in your code but you have table data cells in it) so that the submit button is no longer inside it and does not try to submit the form. (This is a known problem with trying to interleave forms a table rows).

Use a validator to find your errors then fix them.

answered Nov 6, 2013 at 15:11

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Marc-André Bilodeau-Lamontagne · Accepted Answer · 2013-11-06 15:15:11Z

0

@Quentin is right, you need to clean your HTML code and javascript code.

But you have an error in your Javascript. You need to write a capital E for the Email field. It is case sensitive.

Try with this :

var email = document.forms["myForm"]["Email"].value;

answered Nov 6, 2013 at 15:15

Marc-André Bilodeau-Lamontagne

8963 gold badges11 silver badges33 bronze badges

Comments

Md Ashaduzzaman · Accepted Answer · 2013-11-06 15:20:52Z

0

Why not directly use the ID attribute of the element as if you put an ID inside any element it is always preferred to keep it unique. So you can use document.getElementById("ID").value; to get the value of an individual element. Like this :

var firstName = document.getElementById("firstNameTextBox").value;

if(firstName == ''){       
    message.innerHTML = "First Name is required";
}

I have a demo that you should try.

Demo

answered Nov 6, 2013 at 15:20

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

Comments

Diego Claudiu · Accepted Answer · 2013-11-06 15:24:55Z

Add this JavaScript code and it should word



    function validateForm() {
        var Fname = document.forms["myForm"]["Fname"].value;
        var Lname = document.forms["myForm"]["Lname"].value;





        if (Fname == null || Fname == "") {
            alert("First name must be filled out");
            return false;
        }
        if (Lname == null || Lname == "") {
            alert("Last name must be filled out");
            return false;
        }
        if (Phone == null || Phone == "") {
            alert("Phone Number must be filled out");
            return false;
        }
        if (Address == null || Address == "") {
            alert("Address must be filled out");
            return false;
        }
        if (Reason == null || Reason == "") {
            alert("Reason for Visit must be filled out");
            return false;
        }
        if (Doctor == null || Doctor == "") {
            alert("Attending Doctor must be filled out");
            return false;
        }
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");
            return false;
        }

    }

    function listAge() {
        var i = 1;

        for (i = 1; i <= 100; i++) {
            document.write("<option value=" + i + ">" + i + "</option>");
        }
    }

I believe the problem is that you try to take some values from fields that not exists at least from the code that you provided! Just copy the code above and it should work for sure!

Collectives™ on Stack Overflow

Javascript Validation doesn't work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related