Solved: FireFox not validating form like IE

smooth · 21-Apr-2006, 09:09 AM #1

Hey everybody

The site I have, has forms on it, that I use javascript to validate if the user has entered in everything needed (such as name, number of things ordered, etc.).

Now, in Internet Explorer, this works great. If the person doesn't enter their name, for example, an alert box pops up, when you hit OK, it puts the focus on the name field, and you enter your name.

The problem is, in FireFox, the alert box pops up, when you hit OK, it puts the focus on the name field, BUT then it goes ahead and submits the form. How do I go about fixing this?

Here is the code for the form:

Code:

<td><div align="center">
	   <form name="orderLeads" method="post" onSubmit="return validateOrderLeadsForm()" action="asp/order_leads.asp">
		<fieldset class="orderLeadsFieldSet">
		<table width="60%">
		<tr>
		<td>
		<label for="name" class="label">Name</label>
		<br />
		<input type="text" name="name" class="inputBox" />
		</td>
		</tr>
		<tr>
		 <td>
		 <label for="number" class="label"># of Leads</label>
		 <br />
		 <input type="text" name="number" class="inputBox" />
		 </td>
		 </tr>
		<tr>
		  <td>
		  <label for="counties" class="label">Counties</label>
		  <br />
		  <input type="text" name="counties" class="inputBox" />
		  </td>
		  </tr>
		<tr>
		  <td>
		  <label for="fax" class="label">Fax #</label>
		  <br />
		  <input type="text" name="fax" class="inputBox" />
		  </td>
		  </tr>
		<tr>
		  <td>
		  <label for="email" class="label">E-mail</label>
		  <br />
		  <input type="text" name="email" class="inputBox" />
		  </td>
		  </tr>
		<tr>
		  <td>
		  <label for="comments" class="label">Comments</label>
		  <br />
		  <textarea name="comments" cols="30" rows="5" class="textArea"></textarea>
		  </td>
		  </tr>
		<tr>
		  <td>	      
		  <input name="submit" type="submit" class="button" value="submit">
		  <input name="reset" type="reset" class="button" value="reset" />
		  </td>
		  </tr>
		</table>
		</fieldset>
        </form></div></td>

And here is the code for the javascript I am using to validate the form:

Code:

function validateOrderLeadsForm()
        {

		if (document.orderLeads.name.value == "")
		{
		alert("Please enter your name.");
		orderLeads.name.focus();
		return (false);
		}
		
		if (document.orderLeads.number.value == "")
		{
		alert("Please # of leads requested.");
		orderLeads.number.focus();
		return (false);
		}
		
		if (document.orderLeads.counties.value == "")
		{
		alert("Please enter counties.");
		orderLeads.counties.focus();
		return (false);
		}
		else return (true);
		
		}

Any ideas on what is going on?

Shadow2531 · 01:08 PM

You need to use document.forms.formname instead of document.formname and if you need to access a form component, you do document.forms.formname.nameofinput.value for example.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>title</title>
        <script type="text/javascript">
            function validateOrderLeadsForm() {
                var orderLeads = document.forms.orderLeads;
                if ( orderLeads.name.value == "") {
                    alert("Please enter your name.");
                    orderLeads.name.focus();
                    return false;
                }
                if ( orderLeads.number.value == "" ) {
                    alert("Please # of leads requested.");
                    orderLeads.number.focus();
                    return false;
                }
                if (orderLeads.counties.value == "") {
                    alert("Please enter counties.");
                    orderLeads.counties.focus();
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <form name="orderLeads" method="post" onSubmit="return validateOrderLeadsForm()" action="asp/order_leads.asp">
            <fieldset class="orderLeadsFieldSet">
                <table width="60%">
                    <tr>
                        <td>
                            <label for="name" class="label">Name</label>
                            <br>
                            <input type="text" name="name" class="inputBox">
                        </td>
                     </tr>
                    <tr>
                        <td>
                            <label for="number" class="label"># of Leads</label>
                            <br>
                            <input type="text" name="number" class="inputBox">
                         </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="counties" class="label">Counties</label>
                            <br>
                            <input type="text" name="counties" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="fax" class="label">Fax #</label>
                            <br>
                            <input type="text" name="fax" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email" class="label">E-mail</label>
                            <br>
                            <input type="text" name="email" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="comments" class="label">Comments</label>
                            <br>
                            <textarea name="comments" cols="30" rows="5" class="textArea"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>        
                            <input name="submit" type="submit" class="button" value="submit">
                            <input name="reset" type="reset" class="button" value="reset">
                        </td>
                     </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

Also, the for="" for the label tag is for matching an id attribute of an input for example. It's not for matching a name attribute, so you need to fix the above by adding ids to your inputs.

Rockn · 21-Apr-2006, 01:00 PM #3

Remove the brackets from around your return (false); and return (true);

Shadow2531 · 21-Apr-2006, 01:19 PM #4

Don't have time to fully test, but as long as you use labels like below, you can just use a loop for your script instead. That way, you can add more things to the form without updating the script. An idea at least.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>title</title>
        <script type="text/javascript">
            function validateOrderLeadsForm() {
                var orderLeads = document.forms.orderLeads;
                for ( var i = 1; i < orderLeads.length; ++i ) {
                    if ( orderLeads[i].value == "" ) {
                        alert("Please enter " + orderLeads.getElementsByTagName("label")[i - 1].firstChild.nodeValue);
                        orderLeads[i].focus();
                        return false;
                    }
                }
                return true;
            }
        </script>
    </head>
    <body>
        <form name="orderLeads" method="post" onSubmit="return validateOrderLeadsForm()" action="asp/order_leads.asp">
            <fieldset class="orderLeadsFieldSet">
                <table width="60%">
                    <tr>
                        <td>
                            <label for="name" class="label">Name</label>
                            <br>
                            <input type="text" id="name" name="name" class="inputBox">
                        </td>
                     </tr>
                    <tr>
                        <td>
                            <label for="number" class="label"># of Leads</label>
                            <br>
                            <input type="text" id="number" name="number" class="inputBox">
                         </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="counties" class="label">Counties</label>
                            <br>
                            <input type="text" id="counties" name="counties" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="fax" class="label">Fax #</label>
                            <br>
                            <input type="text" id="fax" name="fax" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email" class="label">E-mail</label>
                            <br>
                            <input type="text" id="email" name="email" class="inputBox">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="comments" class="label">Comments</label>
                            <br>
                            <textarea name="comments" id="comments" cols="30" rows="5" class="textArea"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>        
                            <input name="submit" type="submit" class="button" value="submit">
                            <input name="reset" type="reset" class="button" value="reset">
                        </td>
                     </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

treydx · 21-Apr-2006, 03:30 PM #5

I guess this is more for Shadow, but if Smooth wants to learn a lot about forms and the dom, check out PPK's demo form at http://www.quirksmode.org/index.html?/dom/error.html

I learned a ton from this example and his usable forms examples. You won't have to lock yourself into the rigid <label /><input />, repeat, ... syntax (and you can validate on a lot more than just "required" this way).

smooth · 21-Apr-2006, 04:02 PM #6

Awesome, the taking the parenthesis off of the true and false words helped, along with adding the id function and the fixed code.

I really appreciate the help guys.

I'll take a look at the other page you sent to me treydx.

It looks really cool, I just have to figure out how to call the javascript to the form.

Shadow2531 · 22-Apr-2006, 03:08 AM #7

Quote:

Originally Posted by treydx

I guess this is more for Shadow, but if Smooth wants to learn a lot about forms and the dom, check out PPK's demo form at http://www.quirksmode.org/index.html?/dom/error.html

I learned a ton from this example and his usable forms examples. You won't have to lock yourself into the rigid <label /><input />, repeat, ... syntax (and you can validate on a lot more than just "required" this way).

Yes. Quirks mode has lots of cool things. Thanks.

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)