Manage Learn to apply best practices and optimize your operations.

Javascript form validation the easy way

Well to stop your users getting upset, you can use this code to help with html form validation.

Often you need to validate a form before submission.

I created a basic set of JavaScript functions that make the alert process to the user more user friendly. You see there are so many web forms that wait until the page is posted before validation. This frustrated me a lot and often returning back to the previous page all the information is lost and you need to type it again.

Well to stop your users getting upset, you can use this code to help with html form validation.

The code is simple and effective and easy to understand and edit. There are far more complex methods, but I think that this will do you well as it is easy to find, edit and debug. We all know how frustrating it can be to debug complex JavaScript functions.

Here is some sample code below:

You can also check out other code at http://www.calaman.com

You can demo it at
http://www.connectel.co.uk/recruit/recruit_register.asp
try to submit the form without entering any fields

Regards, ametcalf@caneti.com


<SCRIPT LANGUAGE="Javascript">
function ValidateForm(thisForm) {
 //alert('in validation');
 var bolValidForm = true
 var strErrorMessage = "You have not filled in some required fieldsrnrn"
 var objGiveFocusTo = null;

 if (thisForm.Email.value=="" || thisForm.Email.value.indexOf("@") <=0 || 
thisForm.Email.value.indexOf(".",thisForm.Email.value.indexOf("@"))<=0) { strErrorMessage += "You must enter a valid email address.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Email}; bolValidForm = false; } if (thisForm.UserName.value=="") { strErrorMessage += "You must enter a username.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.UserName}; bolValidForm = false; } if (thisForm.Password.value=="" || thisForm.Password.value.length < 5) { strErrorMessage += "You must choose a password of at least 5 characters.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Password}; bolValidForm = false; } if (thisForm.CPassword.value=="") { strErrorMessage += "You must confirm your password.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.CPassword}; bolValidForm = false; } if (thisForm.CPassword.value != thisForm.Password.value) { strErrorMessage += "Your confirmed password does not match your password.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.CPassword}; bolValidForm = false; } //This could be a select validation if the select option value = "" if (thisForm.Referral.value=="") { strErrorMessage += "You must enter how you were referred to us.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Referral}; bolValidForm = false; } //You could also use var list = thisForm.Referral; // if an option is not selected if (list.selectedIndex == 0) { strErrorMessage += "You must enter how you were referred to us.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.Referral}; bolValidForm = false; } //Check boxes if (thisForm.WantRelocation[0].checked==false &&
thisForm.WantRelocation[1].checked==false) { strErrorMessage += "You must choose a relocation type.rn"; if (objGiveFocusTo == null){objGiveFocusTo = thisForm.WantRelocation[0]}; bolValidForm = false; } if (!bolValidForm) { //alert('failed'); alert(strErrorMessage); objGiveFocusTo.focus(); } return bolValidForm; } </SCRIPT> To call the function edit the form tag to call lthe function on submit <FORM NAME="form" Action="#" METHOD="POST" onSubmit="return ValidateForm(this)"> PS. To get an image to validate on post use code below, it will then
trigger the above form onSubmit event <input type="image" name="submitdetails" border="0" src="/images/next.gif" width="57" height="21">

Dig Deeper on Domino Resources - Part 7

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchDataCenter

SearchContentManagement

Close