JavaScript Form Validation Framework

Form Field Validation Demos

The following demonstrates how you validate form fields with five lines of JavaScript and one XML file. The code below can be copied and pasted on your own page for testing and should work as is.

<div 
				id="errorMessage" 
				class="errorMessage"></div>
			<form 
				method="post" 
				action="" 
				id="abn-lookup" 
				onSubmit="return doFormSubmit();">
				<fieldset>
					<legend></legend>
					<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>
					<p id="telephoneContainer">
						Telephone 
						<input 
							type="text" 
							name="telephone" 
							value="" 
							size="20"> (00 0000 0000)
						<span id="telephoneContainerMessage"></span>
					</p>
					<p id="ageContainer">
						Age 
						<input 
							type="text" 
							name="age" 
							id="age" 
							value="" 
							size="4">
						<span id="ageContainerMessage"></span>
					</p>
					<p>
						Gender 
						<input 
							name="gender" 
							type="radio" 
							value="m"> male 
						<input 
							name="gender" 
							type="radio" 
							value="f"> female
					</p>
					<p>
						State <select name="state">
							<option></option>
							<option value="ACT">ACT</option>
							<option value="NSW">NSW</option>
							<option value="NT">NT</option>
							<option value="QLD">QLD</option>
							<option value="SA">SA</option>
							<option value="TAS">TAS</option>
							<option value="VIC">VIC</option>
							<option value="WA">WA</option>
						</select>
					</p>
					<p id="emailAddressContainer">
						Your email address 
						<input 
							type="text" 
							name="emailAddress" 
							value="" 
							size="40">
						<span id="emailAddressContainerMessage"></span>
					</p>
					<input 
						name="doSubmit" 
						type="submit" 
						id="doSubmit" 
						value="Submit">
				</fieldset>
			</form>
			<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> 
			<script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script> 
			<script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
			<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 src="http://www.clickfind.com.au/_resource/script/validation/v3.4/build.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 } );
			PACIFICFOX.buildValidation( { objectName:"oForm1", sMetaUrl:"meta.xml" } );
			</script>
			
			<style>
			p.error {
				border: 1px solid #990000;
				background-color: #FFFFCC;
			}
			#errorMessage li, #errorMessage li p {
				padding: 0;
				margin: 0;
				margin-bottom: 0.2em;
				color: #990000;
			}
			p.error span {
				color: #990000;
			}
			</style>

The XML that defines the validation that needs to occur is as following

<?xml version="1.0" encoding="utf-8"?>
			<meta>
				<property 
					name="businessName" 
					friendlyName="Business name" 
					required="true" 
					minimumLength="2" 
					maximumLength="40" 
					trim="true"/>
				<property 
					name="postcode" 
					friendlyName="Postcode" 
					required="false" 
					minimumLength="4" 
					maximumLength="4" 
					trim="true"/>
				<property 
					name="telephone" 
					friendlyName="Telephone" 
					required="true" 
					format="0[0-9] [0-9]{4} [0-9]{4}" 
					minimumLength="10" 
					maximumLength="10" 
					countSpace="false">
					<message type="invalidFormat">custom message for invalid format</message>
				</property>
				<property 
					name="state" 
					friendlyName="State" 
					required="true"/>
				<property 
					name="age" 
					friendlyName="Age" 
					required="true">
			
					<range lower="18" upper="60"/>
					<range lower="65" upper="90"/>
					<function type="onerror" name="myUserDefinedValue1"><![CDATA[var myContainer = document.getElementById( obj1.getName() + 'Container' );
					myContainer.className = "error";
					obj1.error.reset();]]></function>
					<function type="onvalidate" name="myUserDefinedValue2"><![CDATA[var myContainer = document.getElementById( obj1.getName() + 'Container' );
					myContainer.className = "";]]></function>
				</property>
				<property 
					name="gender" 
					friendlyName="Gender" 
					required="true"/>
				<property 
					name="emailAddress" 
					friendlyName="Email" 
					required="false" 
					minimumLength="7"
					maximumLength="40" 
					trim="true" 
					format="^[^@]+@.+$">
					<message type="required">this is a custom message for a required field error</message>
			
					<message type="minimumLength">this is a custom message for a minimum length error</message>
					<message type="maximumLength">this is a custom message for a maximum length error</message>
					<message type="invalidFormat">the email address needs an @ sign in it</message>
				</property>
			</meta>

Sponsored by clickfind - Advertise your Business online