INFO: Validate Data when Submitting Forms with Internet Explorer

ID: Q216435

The information in this article applies to:

Microsoft Internet Explorer (Programming) versions 3.0, 3.01, 3.02, 4.0, 4.01, 4.01 SP1, 4.01 SP2, 5.0, 5.0dp1, 5_beta

SUMMARY

This article explains where to validate data when submitting forms. The best option is to validate all the form data in the onSubmit event handler of the form, though there is a catch when using Internet Explorer 3.x. You can also use onChange and onBlur events to validate data. This article points out some things to watch out for when doing so.

MORE INFORMATION

Using onSubmit

Internet Explorer versions 3.x and later support the onSubmit event for form elements. The onSubmit event is the best place to perform data validation.

If the data is invalid, then for Internet Explorer 4.x or later, set the return value to false (for example, event.returnValue=false) to cancel the form submission.


<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function ValidateData()
{
    if (nameform.namefld.value == "")
    {
	alert("Please enter your name(25 chars)");
        event.returnValue = false
    }
    //else the form will be submitted automatically
}
</SCRIPT>
</HEAD>
<BODY>
<FORM id=nameform name=nameform onsubmit="ValidateData()" action="http://www.microsoft.com">
<!--
      If you're using POST method, make sure your action is set to an .asp file.  
      If it's a html file, Error 405 will be displayed.
-->
Enter your name : <INPUT type=text id=namefld name=namefld> <BR>
<INPUT type=submit value="Submit Form">
</FORM>
</BODY>
</HTML>

Since Internet Explorer 3.x does not support the event object, the following script can be used to cancel the event.


<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function ValidateData()
{
    if (nameform.namefld.value == "")
    {
        alert("Please enter your name(25 chars)");
        nameform.namefld.focus();<BR/>
        return false;
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM id=nameform name=nameform onsubmit="return ValidateData()">
Enter your name : <INPUT type=text id=namefld name=namefld> <BR>
</FORM>

<!-- 
If using VBScript, you can use onSubmit="ValidateData()" and in the VBScript function set the return value to false as in this example: 
Function ValidateData
    if nameform.namefld.value = "" then
        ValidateData = false
    End if

End Function
-->
</BODY>
</HTML>

Using onChange

Often developers use the onChange event handlers for individual input elements to perform validation. The onChange event for a text input field is called only when the following conditions are satisfied:

The text input field loses focus.

The user, not a script, is changing the contents.

The contents change between the time the text input field gets and loses focus.

You have to set event.returnValue = false if the data is found to be invalid or there is a chance that invalid data will be submitted. For testing, save the following HTML code to a file and load the file in Internet Explorer:


<HTML>
<BODY>
<SCRIPT language="JavaScript">
function ValidateData(){
    if ((nameform.namefld.value == "") || (nameform.namefld.value.length < 5))
	{
	alert("Invalid input");
	event.returnValue = false;
	}
}
</SCRIPT>
<FORM id=nameform name=nameform action="http://www.microsoft.com">
Enter your name : <INPUT type=text id=namefld name=namefld onChange="ValidateData()"> <BR>
<INPUT type=submit>
</FORM>
</BODY>
</HTML>

Test 1

Click in the text field and then click Submit without entering any text. Notice that the onChange event is not called resulting in an empty value being submitted with the form.

Test 2

If false isn't returned from the event handler, invalid data may be submitted. Comment out the event.returnValue = false line for this test. If a user enters invalid data and the onChange event does not reset the contents of the text input and return false, the user can click the Submit button the second time. The onChange event handler will not be called because the contents have not changed. Thus invalid data will be submitted with the form.

Note that when the handler returns false, the user will not be able to move out of that input field until a valid value is entered.

Using onBlur

As mentioned in "Test 1" above, onChange may not be called in certain cases. The alternative is to use the onBlur event handler. But in this case you have to set the focus back to the Input control. Otherwise, once the focus is lost from the control, the user will be able to click the Submit button and invalid data will be submitted.

When using the onChange or onBlur event handlers, the focus may not be on the control when the page is first loaded. In this case, if the user clicks the Submit button, the page will be submitted without any validation.

So using the onSubmit event handler is the best and safest place to perform data validation.

REFERENCES

Documentation about the HTML and DHTML features discussed in this article can be found at the MSDN Web Workshop.

Also, see the following article in the Microsoft Knowledge Base for related information about submitting data in a form:

Q172064 HOWTO: Submitting Data from an ActiveX Control in a Form

Additional query words:

Keywords : kbIE300 kbIE301 kbIE401 kbScript kbIE302 kbIE401sp1 kbIE401sp2 kbGrpInet kbIE500
Version : WINDOWS:3.0,3.01,3.02,4.0,4.01,4.01 SP1,4.01 SP2,5.0,5.0dp1,5_beta
Platform : WINDOWS
Issue type : kbinfo