JavaScript Form Validation Framework

Form Field Validation Demos

The following demonstrates how you validate a form field and output the error as a custom error in a div that can be styled however you like.

Try it!

Enter nothing in the business name and submit the form, enter 1 character in the business name and submit the form, enter more than 40 characters in the business name and submit the form. Enter anything other than a digit in the postcode field and submit the form.

The code below can be copied and pasted on your own page for testing and should work as is.

Please note that we have limited the demo to two form fields to keep it readable.

<div 
				id="errorMessage" 
				class="errorMessage"></div>
			<form 
				method="post" 
				action="" 
				id="abn-lookup" 
				onSubmit="return doFormSubmit();">
				<fieldset>
					<p>
						Business name 
						<input 
							type="text" 
							name="businessName" 
							value="">
					</p>
					<p>
						Postcode 
						<input 
							type="text" 
							name="postcode" 
							value="" 
							size="4">
					</p>
					<input 
						name="doSubmit" 
						type="submit" 
						id="doSubmit" 
						value="Submit">
				</fieldset>
			</form>
			<script src="http://www.clickfind.com.au/_resource/script/validation/v3.4/demo/pacificfox.js"></script>
			<script src="http://www.clickfind.com.au/_resource/script/validation/v3.4/demo/validation.js"></script>
			<script language="JavaScript" type="text/javascript">
			var oForm1;
			var isSubmitted = false;
			function doFormSubmit() {
				isSubmitted = true;
				var result = oForm1.validate();
				if ( !result ) { 
					document.getElementById( 'errorMessage' ).innerHTML = oForm1.error.getAsHTMLList();
				} 
				oForm1.error.reset(); 
				return result;
			}
			
			oForm1 = new PACIFICFOX.Form( { formIdentity:"abn-lookup", displayError:false } );
				
			property = oForm1.addProperty( 
								{ name:"businessName"
								, friendlyName:"Business name"
								, required:true
								, minimumLength:2
								, maximumLength:40
								, trim:true } );
			property = oForm1.addProperty( 
								{ name:"postcode"
								, friendlyName:"Postcode"
								, required:false
								, regularExpression:"$[0-9]+$"
								, minimumLength:4
								, maximumLength:4
								, trim:true } );
			</script>
			
			<style>
			#errorMessage li, #errorMessage li p {
				padding: 0;
				margin: 0;
				margin-bottom: 0.2em;
				color: #990000;
			}
			</style>

Comments

Add new comment

anthony
mwendwak@gmail.com

Jul 31, 2009 5:48 PM

hi, i couldnt get the validation to execute. i copied the files to my webserver but on submitting my form, mozilla error cconsole tells me 'pacificfox' not defined! what could be the problem? thanks

Donna

Apr 9, 2009 11:13 AM

Can I write my own custom handlers for this framework?

Comments are moderated

Sponsored by clickfind - Advertise your Business online