Issues testing HTML web form

Question

I'm trying to test a HTML web form, but I'm experiencing some problems.

The form opens a secondary HTML file (showing a success message) if all data is entered correctly. If data is not entered, or if data is entered incorrectly, the field name should turn red and a message is displayed directing the user to re-enter the information.

I opened the file directly from Finder (I'm on Mac) to Google Chrome, where it displays fully. However, regardless of what I put (or don't put) in the input fields, the code directs me to the success message.

The code is as follows:

<head>
<title>Form</title>

<script language="javascript" type="text/javascript">

function validateForm() {
    var result = true;
    var msg="";

    if (document.Entry.name.value=="") {
        msg+="You must enter your name \n";
        document.Entry.name.focus();
        document.getElementById(‘name’).style.color="red";
        result = false;
    }
    if (document.Entry.age.value=="") {
        msg+="You must enter your age \n";
        document.Entry.age.focus();
        document.getElementById(‘age’).style.color="red";
        result = false;
    }
    if (document.Entry.number.value=="") {
        msg+="You must enter your number \n";
        document.Entry.number.focus();
        document.getElementById(‘number’).style.color="red";
        result = false;
    }

    if(msg==""){
    return result; 
    }

    {
    alert(msg) 
    return result; 
    }
}

</script>
</head> 

<body>
<h1>Form</h1>
<form name="Entry" method="post" action="success.html">
<table width="50%" border="0">
    <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="age">Age</td>
        <td><input type="text" name="age" /></td>
    </tr>
    <tr>
        <td id=”number”>Number</td>
        <td><input type="text" name="number"/></td>
    </tr>

<tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return 
    validateForm();" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
</tr>

</table>
</form>
</body>

I have looked over the code and I am sure it is correct, so why doesn't the HTML work as intended?

You seem to have some errors in console for this statement: document.getElementById(‘name’).style.color="red"; — Prabu Raja, Nov 24 '14 at 19:28
You're using the incorrect single-quote character for delimiting strings. You're using `‘` and `’` when you should be using `'`. — Dai, Nov 24 '14 at 19:30
thank you @Dai - fixed that, but I'm still getting the error :( — gulliver, Nov 24 '14 at 19:33
or my coding teacher @PrabuRaja - he provided me with the base for the code haha! — gulliver, Nov 24 '14 at 19:33
possible duplicate of [testing HTML and JavaScript forms with action files](http://stackoverflow.com/questions/26279293/testing-html-and-javascript-forms-with-action-files) — Craicerjack, Nov 24 '14 at 19:41

a1111exe · Accepted Answer · 2014-11-24T21:03:17.733

Your code contains errors including:

Wrong " ' " chars
Wrong ' " ' chars
Using the reserved word 'number'

The following is the fixed working (at least in Firefox) code:

<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function validateForm() {
    var result = true;
    var msg="";
    if (document.Entry.name.value=="") {
        msg+="You must enter your name \n";
        document.Entry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }
    if (document.Entry.age.value=="") {
        msg+="You must enter your age \n";
        document.Entry.age.focus();
        document.getElementById('age').style.color="red";
        result = false;
    }
    if (document.Entry.mumber.value=="") {
        msg+="You must enter your number \n";
        document.Entry.mumber.focus();
        document.getElementById('number').style.color="red";
        result = false;
    } 
    if(msg == ""){
        return result; 
    }
    else
    {
        alert(msg) 
        return result; 
    }
}
</script>
</head> 
<body>
<h1>Form</h1>
<form name="Entry" id="Entry" method="post" action="success.html" onsubmit="return validateForm()">
    <table width="50%" border="0">
        <tr>
            <td id="name">Name</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td id="age">Age</td>
            <td><input type="text" name="age" /></td>
        </tr>
        <tr>
            <td id="number">Number</td>
            <td><input type="text" name="mumber"/></td>
        </tr>
        <tr>
            <td><input type="submit" name="Submit" value="Submit" /></td>
            <td><input type="reset" name="Reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>
</html>

It will be wise to initiate the 'result' variable as 'false'. This way you need to update it only once - when 'msg' is empty.

It seems that you should choose some other editor/IDE. Also, try to debug your JS scripts - you have debuggers for all modern browsers. I personally use Firebug addon for Firefox. Many people use Chrome developer tools.

Also, you may find this simple reference handy: http://www.w3schools.com/js/js_form_validation.asp

Craicerjack · Answer 2 · 2014-11-24T19:35:28.410

0

Your form action is success.html so your form is submitting to this page regardless of your javascript.
The Javascript function is firing on click but its a submit button so the submit is still firing. The page its submitted to is success.html so this is continually being called regardless because the form is continuously being submitted.

edited Nov 24 '14 at 19:35

answered Nov 24 '14 at 19:27

Craicerjack

6,203
2
31
39

score 0 · Answer 3 · edited May 23 '17 at 10:26

The issue comes from how you are accessing the form inputs. Type this into a console, or at the start of your script block:

console.log(document.Entry);

It'll print out undefined. Your code is throwing an error, failing and never returning a false value to prevent the form from submitting.

I suggest taking a look at this question to see various ways of accessing form inputs using vanilla javascript.

score 0 · Answer 4 · answered Nov 24 '14 at 20:36

I've rewrite your code. Now it's working. You can check working example JSFiddle - http://jsfiddle.net/uj5xcp26/ or copy&paste example below:

<html>
    <head>
        <title>Form</title>
    </head>
    <body>
    <h1>Form</h1>
    <form name="Entry" method="post" action="">
        <table width="50%" border="0">
            <tr>
                <td id="name">Name</td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td id="subject">Age</td>
                <td><input type="text" name="age" id="age" /></td>
            </tr>
            <tr>
                <td id=”number”>Number</td>
                <td><input type="text" name="number" id="number"/></td>
            </tr>

            <tr>
                <td><button onclick="validateForm();" id="submit_btn" type="button" name="Submit" value="Submit">Submit</button></td>
                <td><input type="reset" name="Reset" value="Reset" /></td>

            </tr>
        </table>
    </form>


    <script type="text/javascript">
        //Assuring page is loaded
        document.onload = function(){
            validateForm();
        };

        var validateForm = function() {
            var result = true;
            var msg="";
            var name,age,number;


            name  = document.getElementsByName("name")[0];
            age  = document.getElementsByName("age")[0];
            number  = document.getElementsByName("number")[0];

            //Conditionals
            if (name.value =="") {
                msg+="You must enter your name \n";
                name.focus();
                name.style.color="red";
                result = false;
            }
            if (age.value=="") {
                msg+="You must enter your age \n";
                age.focus();
                age.style.color="red";
                result = false;
            }
            if (number.value=="") {
                msg+="You must enter your number \n";
                number.focus();
                number.style.color="red";
                result = false;
            }

            if(msg==""){
                return result;
            }

            {
                alert(msg);
                return result;
            }

        };
    </script>
    </body>
    </html>

score 0 · Answer 5 · answered Nov 24 '14 at 23:23

0

Firstly try putting your script after your form in the body.

Secondly I agree with above your form action will fire regardless. Can you not handle message with innerHTML.

answered Nov 24 '14 at 23:23

Creaven

319
2
16

Issues testing HTML web form

5 Answers5