Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
251 lines (206 sloc) 8.55 KB
<meta name="generator" content="HTML Tidy, see">
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<link href="css/global.css" type="text/css" rel=
"stylesheet" media="all">
<title>Config test</title>
<script type="text/javascript" src="js/EventHelpers.js">
<script type="text/javascript" src="js/config.js">
<script type="text/javascript" src="js/formValidator.js">
<h1>Config.js example: Form Validation</h1>
<p>This page is designed to show how to use the config.js
library to create a simple form validation system. You can
<a href=
"/viewsource.cgi/tests/config/js/formValidator.js">take a
look at the script</a> to see how it works, and <a href=
"/viewsource.cgi/tests/config/creditCardForm.html">view the
source of this document</a> to see the configuration XML
that it uses at the end of the page. There is also <a href=
"creditCardFormOutsideConfig.html">a version of this page
that uses an external XML file.</a></p>
<div id="xmlBlock">
<p><strong>Note:</strong> do <em>not</em> put it in a real
credit card number in to this form.</p>
<div id="messages">
<form id="creditCardForm">
<legend>Mailing Information</legend>
<table class="formTable">
<th>Name :</th>
<td><input type="text" name=
<th>Address :</th>
<td><input type="text" name=
<th>City :</th>
<td><input type="text" name=
<th>Province :</th>
<td><select name="province">
<option value="">
Choose one...
<option value="ON">
</select> </td>
<th>Postal Code :</th>
<td><input type="text" name=
<legend>Billing Information</legend>
<table class="formTable">
<th>Credit Card Type :</th>
<td><select name="ccType">
<option value="">
Select one ...
<option value="Visa">
</select> </td>
<th>Credit Card Number :</th>
<input type="text" name="ccNum">
<div class="fieldDescription">
<strong>Note:</strong> Do not
put in your real credit card
number. This is
<strong>just</strong> an
example. Please put in any 16
digit number.
<th>Credit Card Expiry :</th>
<td><input type="text" name=
<div class="buttonRow">
<input type="submit" value="Submit">
<div id="config">
<%-- This section contains english text that will be --%>
<%-- inserted into the page. --%>
<%-- This error appears when the information submitted --%>
<%-- is not in the right format. --%>
<div id="errorMessage">
<p>There are errors with the information you are trying
to submit. Please check the form below, correct the
errors and resubmit.</p>
<%-- This text appears in an alert box when the form is --%>
<%-- submitted successfully. --%>
<submissionAlert removeMultispaces="true">
If this was a real form, the information above would
have been submitted. Since this isn't, we won't submit
any of the form information, including the @ccType@ Credit Card number
<%-- This error appears below a form field when the --%>
<%-- information is blank and the form is submitted. --%>
The above field is mandatory
<%-- This section describes validation information. For --%>
<%-- each object inside "inputs" can have three possible --%>
<%-- properties: --%>
<%-- 1) isMandatory: set to true if the field is --%>
<%-- mandatory --%>
<%-- 2) pattern: the regex that this form field must --%>
<%-- match. --%>
<%-- 3) unmatchError: The error that appears below the --%>
<%-- form field if it doesn't match the --%>
<%-- regex. --%>
<inputs datatype="array">
<%-- Note: We assume Canadian postal codes only --%>
<unmatchError>The postal code must be in a valid format.</unmatchError>
<%-- Credit card information --%>
<%-- *******************************************************************
a much better pattern for credit cards is described at
I don't use it here because I don't want to encourage
people putting in their real credit cards in this
test. :-)
<unmatchError>The credit card you entered is not valid.</unmatchError>
<unmatchError>The expiry date must be in the form yy/mm.</unmatchError>