Javascript form validation not working in IE

Question

I have a very small form and a javascript to validate it. The only field it checks is the email address to see if it's valid.

When I use the form in Chrome, the script works as intended (submits form, unless email is invalid)

When I load the page in IE9, the form won't submit, regardless of whether the email field is completed or not.

Looking at the debug console in IE, the error I have is:

"The value of the property 'submitData' is null or undefined, not a Function object"

My form looks like this:

<form id="contactform" action="http://localhost/test/wp-content/themes/mytheme/enquiry/enquiry-handler.php" enctype="multipart/form-data" method="POST" onsubmit="return validateForm()">
<label for="email">Shipping From?</label>
<select name="from" class="quoteboxSelect">
<option value="0">Please Choose</option>    
<option value="51\">United Kingdom<option value="52\">France<option value="53\">Germany<option value="54\">Afghanistan</select><br/ >
<label for="to">Shipping To?</label>
<select name="to">
<option value="0">Please Choose</option>
 <option value="51\">United Kingdom<option value="52\">France<option value="53\">Germany<option value="54\">Afghanistan</select><br/ >

<label for="what">Shipping What?</label>
<select name="what">
<option value="0">Please Choose</option>
<option value="26\">Excess Baggage<option value="27\">International Removal<option value="28\">Car Shipping<option value="29\">Freight</select><br/ >
<label for="email">Email:</label><br/>
<input name="email" size="20" /><br/>
<button class="" onClick="submitData();" value="Send request">Get Quote</button>

</form>

and my javascript looks like this:

<script>
function validateForm()
{
var x=document.forms["contactform"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Please enter a valid email address!");
  return false;
  }
return true;
}
</script>

Can anyone suggest how I can fix this?

Thanks :)

score 0 · Accepted Answer · answered Nov 22 '13 at 00:21

It appears form was changed from using a javascript function bound to the submit button, to using your validation method bound to the submit handler for the form itself.

Try changing:

<button class="" onClick="submitData();" value="Send request">Get Quote</button>

To

<button  type="submit" value="Send request">Get Quote</button>

score 0 · Answer 2 · edited May 23 '17 at 10:31

So, your problem is your <input name="email"id="email"size="20" /> should have an id= attribute.

How I found the issue:

I created a jsfiddle to test this: http://jsfiddle.net/4Zz4y/
Ran it in IE with browser mode set to IE9 (F12)
then I saw the error SCRIPT5009: 'submitData' is undefined in the F12 console.
I then found this question: Property 'submit' of object #<HTMLFormElement> is not a function

Javascript form validation not working in IE

2 Answers2