JavaScript Form Validation Framework

Form Field Validation Demos

The following demonstrates how you validate a form field and process the error with a custom error handler.

See the form validation demo on its own

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 id="businessNameContainer">
						Business name 
						<input 
							type="text" 
							name="businessName" 
							value="">
						<span id="businessNameContainerMessage"></span>
					</p>
					<p id="postcodeContainer">
						Postcode 
						<input 
							type="text" 
							name="postcode" 
							value="" 
							size="4">
						<span id="postcodeContainerMessage"></span>
					</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 } );
			
			function myUserDefinedValue1( obj1, obj2 ) {
				var myContainer = document.getElementById( obj1.getName() + 'Container' );
				var myContainerMessage = document.getElementById( obj1.getName() + 'ContainerMessage' );
				myContainerMessage.innerHTML = "<br>" + obj1.error.getAsString();
				myContainer.className = "error";
				obj1.error.reset(); // reset to indicate we've displayed the error
			}
			function myUserDefinedValue2( obj1, obj2 ) {
				var myContainer = document.getElementById( obj1.getName() + 'Container' );
				var myContainerMessage = document.getElementById( obj1.getName() + 'ContainerMessage' );
				myContainerMessage.innerHTML = "";
				myContainer.className = "";
			}
			
			property = oForm1.addProperty( 
								{ name:"businessName"
								, friendlyName:"Business name"
								, required:true
								, minimumLength:2
								, maximumLength:40
								, trim:true 
								, onerror:myUserDefinedValue1
								, onvalidate:myUserDefinedValue2 } );
			property = oForm1.addProperty( 
								{ name:"postcode"
								, friendlyName:"Postcode"
								, required:false
								, regularExpression:"$[0-9]+$"
								, minimumLength:4
								, maximumLength:4
								, trim:true 
								, onerror:myUserDefinedValue1
								, onvalidate:myUserDefinedValue2 } );
			</script>
			
			<style>
			p.error {
				border: 1px solid #990000;
				background-color: #FFFFCC;
			}
			p.error span {
				color: #990000;
			}
			</style>

Note that the Property object gets passed in a reference to a custom error handler.

This error handler receives a reference to the Property object itself which allows us to work with the information in the form field.

On line 2 the custom error handler expects an HTML element with id "businessNameContainerMessage" to be present, where "businessName" is the name that matches the form field and the same goes for "businessNameContainerMessage" on line 3.

On line 4 the error message gets inserted in the message container, and on line 5 the CSS class is changed so that the style of the error area changes.

Comments

There are no comments at the moment, be the first to leave a comment!

Comments are moderated

Sponsored by clickfind - Advertise your Business online