Microsoft KB Archive/216435

= INFO: Validate Data when Submitting Forms with Internet Explorer =

Article ID: 216435

Article Last Modified on 7/24/2001

-

APPLIES TO


 * Microsoft Internet Explorer 3.0
 * Microsoft Internet Explorer 3.01
 * Microsoft Internet Explorer 3.02
 * Microsoft Internet Explorer 4.0 128-Bit Edition
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 4.01 Service Pack 1
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 5.0
 * Microsoft Internet Explorer (Programming) 5_beta

-



This article was previously published under Q216435



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.0 or later. You can also use onChange and onBlur events to validate data. This article points out some things to watch out for when doing so.



Using onSubmit
Internet Explorer versions 3.x or 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.    function ValidateData {   if (nameform.namefld.value == "") {   alert("Please enter your name(25 chars)"); event.returnValue = false }   //else the form will be submitted automatically }    

Enter your name :       Since Internet Explorer 3.x does not support the event object, the following script can be used to cancel the event.   <SCRIPT language="JavaScript"> function ValidateData {   if (nameform.namefld.value == "") {       alert("Please enter your name(25 chars)"); nameform.namefld.focus;<BR/> return false; } } </SCRIPT> </HEAD>  <FORM id=nameform name=nameform onsubmit="return ValidateData"> Enter your name : <INPUT type=text id=namefld name=namefld> <BR> </FORM>

</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:   <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.

<div class="references_section">