How do I prevent a form from being submitted, until all required fields are correct ?

How do I prevent a form from being submitted, until all required fields are correct ?
Only one field is used in the example.
Every time the user clicks the OK button, the onClick event fires. If it passes the test the form will submit, else the focus will be placed on the textbox, an alert will appear and the submit button will be disabled, which stops the submit process.
The onMouseMove event is used to enable the button again. I just added the error handling code in case an error comes up. It is actually not necessary, you can just enable the button again.
I use the onControlSelect event on the submit button, because sometimes after being disabled, the button looks like it is embedded in the page. The above event fixes it.
The above can be applied to multiple textboxes, and multiple conditions and arguments can be used.
It saves time and space as the validation is done on the current page, before the form is submitted.
Otherwise the user has to go through the laborious task of clicking the back button on the posting page to be redirected to the previous page, and fix a simple mistake. I've had comments that the JavaScript return false statement is a better solution. Unfortunately the return false; statement doesn't seem to work when you are using frames.
I hope you find this usefull !.

Original Author: iNet1

Code

<br/><html><br/><head><br/><title>Test</title><br/><script language="VBScript"><br/>sub cmdOK_onClick<br/> If Len(document.form1.txtEmpNo.value) > 8 Then<br/> 	document.form1.txtEmpNo.focus<br/>	alert"You have entered an invalid Employee number !"<br/>	document.form1.cmdOK.disabled = True<br/>end sub<br/>sub Enable<br/> On Error Resume Next<br/> document.form1.cmdOK.disabled = False<br/>end sub<br/></script><br/></head><br/><body onMouseMove="Enable"><br/><form name="form1" method="POST" action="test.htm"><br/><input type="text" name="txtEmpNo"><br/><input type="submit" name="cmdOK" value="OK" onControlSelect="cmdOK_onClick"><br/></form><br/></body><br/></html> <br/>

About this post

Posted: 2002-06-01
By: ArchiveBot
Viewed: 89 times

Comments

No comments have been added for this post.

You must be logged in to make a comment.