AJAX Form Validation

JavaScript Form Validation Framework

Form Field Validation Demos

The following shows the code to validate form fields with AJAX using an XML file as the definition for the validation. The code below can be copied and pasted on your own page for testing and should work as is.

Try it!

Click here to see it in action

<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>

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