?
Solved

Javascript validation works in IE but not in Mozilla Firefox

Posted on 2008-11-14
7
Medium Priority
?
783 Views
Last Modified: 2013-12-07
Hello,
We have a general function to check the forms attributes to see if they have been filled out. In this instance, the field name Product_Attributes[1]:value needs to have a value. This function works in IE but not in Firefox.

There is a reason why the field name is so funky. I do not think that I can change it since this is a custom implementation of some crazy stuff. If I can get the function to work with Mozilla using that name that is best.
Thank you!
function checkme(){ //check for required fields
	if (document.productform.AttributeValue){if (document.productform.AttributeValue.value == "")
    {inf_attr.firstChild.nodeValue=(productform.attrprompt.value + " is required.");
    document.productform.AttributeValue.focus();return(false)}}}
 
THEN IN THE BODY
 
<form NAME="productform" METHOD="post" ACTION="/store/merchant.mvc?" onSubmit="return checkme()" >
			<tr>
<td nowrap="nowrap" class="body_darkblue">
Size: <select id="AttributeValue" name="Product_Attributes[1]:value"><option value="">Select One</option><option value="35_2-3">Wms 6 US (35 2/3 EU)</option><option value="36_1-3">Wms 6.5 US (36 1/3 EU)</option</select>

Open in new window

0
Comment
Question by:computergiants
  • 4
  • 2
7 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22964281
try:

function checkme(){ //check for required fields
	var sel = document.getElementById("AttributeValue")
	if (sel)
	{
	 	if (sel.value == "")
    		{
			inf_attr.firstChild.nodeValue=(document.productform.attrprompt.value + " is required.");
    			sel.focus();
			return(false);
		}
	}
}

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 22965888
Your function can be rewritten to be much simpler.
But when you want to stay with the IE working version then extend it like this to get it working in FF:
function checkme(){ //check for required fields
	if (document.productform.AttributeValue){if (document.productform.AttributeValue.value == "")
    {document.getElementById("inf_attr").childNodes[0].innerHTML=(document.productform.attrprompt.value + " is required.");
    document.productform.AttributeValue.focus();return(false)}}}

Open in new window

0
 

Author Comment

by:computergiants
ID: 22972138
Thank you for the solutions. I will test these out at work tomorrow.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:computergiants
ID: 23296015
hielo: Your javascript worked in IE just fine but did not prevent FireFox from adding the item to the cart without an attribute selected (no error message, just added it as if the JS wasn't there)

Zvonko: Your javascript failed in IE (no error message, just added it as if the JS wasn't there) but worked in FireFox.

Thank you both for responding and sorry for the long delay in my response. If you have any new ideas I'd love to hear them.
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 23483523
On the code you posted you have:
inf_attr.firstChild...
productform.attrprompt...

Where do these come from? Here's my best guess at what your markup might look like:
<script type="text/javascript">
function checkme(){ //check for required fields
      var sel = document.getElementById("AttributeValue");
	 var inf_attr=document.getElementById("inf_attr");
      if (sel)
      {
             if (sel.value == "")
                {
                  inf_attr.innerHTML=(document.productform.attrprompt.value + " is required.");
                      sel.focus();
                  return(false);
            }
		  return true;
      }
return false;
}
</script> 
<form NAME="productform" METHOD="post" ACTION="/store/merchant.mvc?" onSubmit="return checkme()" >
                  <tr>
<td nowrap="nowrap" class="body_darkblue">
<div><span id="inf_attr"></span><input type="hidden" name="attrprompt" value="Size "/>
<div>Size: <select id="AttributeValue" name="Product_Attributes[1]:value"><option value="">Select One</option><option value="35_2-3">Wms 6 US (35 2/3 EU)</option><option value="36_1-3">Wms 6.5 US (36 1/3 EU)</option></select></div>
</div>
<input type="submit" value="Submit"/>
</form> 

also, on what you posted you have:
)</option</select> 
notice that the closing "option" is NOT properly closed. You missed a ">" character.

Open in new window

0
 

Accepted Solution

by:
computergiants earned 0 total points
ID: 23487825
Hello Hielo,

I changed it with the following code to produce a popup window. It was the easiest fix I could find.
Thank you for all your assistance!

	function checkme2(){ //check for required fields
	var attrv = document.productform.AttributeValue;
	if (attrv){if (attrv.value == "")
    {var msg = "Please Select A Value From The Dropdown List";
	alert(msg); 
    attrv.focus();return(false)}}}

Open in new window

0
 

Author Comment

by:computergiants
ID: 23487852
Closing this question since I answered it. However I would like to give 125 points to Hielo since he followed up even after I had long since abandoned this thread.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question