<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Client Side Validation Test</TITLE>
<link type="text/css" rel="stylesheet" href="styles/cbe.css">
<!-- validation stuff -->
<script type='text/javascript' src="javascript/clientValidation.js"></script>
<script type='text/javascript' src="javascript/validationUtil.js"></script>
<script type='text/javascript' src='javascript/cbe/cbe_core.js'></script>
<!-- only needed for debug related stuff -->
<script type='text/javascript' src='javascript/cbe/cbe_debug.js'></script>
<script type='text/javascript' src='javascript/cbe/cbe_event.js'></script>
<script type='text/javascript' src='javascript/cbe/cbe_util.js'></script>
<script type='text/javascript'><!--
var debugValidation = false;
var selectOnFocus = true;
var useMessageBox = true;
var showErrorInFormElement = false;
var allowOverride = false;
var severityGif = 'critical';
//-->
</script>
</head>
<body marginwidth="0" marginheight="2" topmargin="2" leftmargin="0">
<center><table width="75%"><tr>
<td>
<h1>Why use client-side validation (CSV)?</h1>
<p>With the explosion of thin-client development, most web applications do not utilize the resources
of the client. It is almost viewed as 'taboo.' I contend that the client machine is a valuable resource
that should be utilized for its processing capabilities.</p>
<p>Most web applications use server-side processing to validate HTML forms.
This works but is very inefficient since the request must be sent over the wire, checked, and a response
sent back to the user. Why not let the client machine do the mundane field validation and
let the server handle business logic validation? This framework is written to satisfy this request
and validate HTML forms for field types where it should be, on the client-side. It is written entirely in Javascript and supports multiple
browsers.</p>
<p>A <a href="#sample">sample form</a> is provided that utilizes this framework.</p>
<h1>Features of client-side validation (CSV):</h1>
<ul>
<li>Lightening fast validation speed.</li>
<li>Support for multiple browsers - CSV uses cross browser's
<a href="http://www.cross-browser.com">framework</a> to abstract out support for multiple browsers.</li>
<li>Ability to display errors in multiple locations - message box, label modification, and within input element.</li>
<li>Ability to put framework in debug mode.</li>
<li>Ability to submit an array of buttons for the framework to disable while submitting the form.
By default, it will disable buttons with label id='submit'. You can validate this by submitting the form in
debug mode.</li>
<li>Flexible Message Box
<ul>
<li>Display a DHTML message box with errors that link back to the offending input element.
Message box is displayed based on your location of a DIV element with id=errMsg. This means
you can locate the message box anywhere on your page. You
can override this and other variables as you like.</li>
<li>Ability to switch out message box icons.</li>
<li>Dynamically calculate number of columns based on browser width. The maximum column
width is based on user setting.</li>
<li>Limit number of rows of display based on user setting.</li>
<li>Customizable display of messages and look and feel based on CSS.</li>
<li>Name of error is based on label name. This name will be formatted from label 'id'. It may
be mixed case or separated with '.' or '_'.</li>
<li>Toggle whether focus from error anchor selects the text or just drops in a cursor.</li>
<li>You can utilize the same look and feel for both client-side and server-side error messages.</li>
</ul>
</li>
<li>Allow user to override errors if all required fields are satisfied. If you allow override, the framework
will watch your errors. If the framework sees that you have submitted the form a second time and the errors are
the same and all required fields have been satisfied, then it will prompt you for override confirmation.</li>
<li>Easily add new restraints. See 'clientValidation.js'</li>
<li>Support field validation based on its 'id' prefix.</li>
<li>Built-in validation support for almost 10 field types.</li>
<li>Robust support for multiple input formats through regular expressions. See support for 'date' type.</li>
<li>Debug of Javascript methods through CBE's handy debug screen. Just type in the function in the
expression window and see the output in the message box.</li>
</ul>
<p>A <a href="#sample">sample form</a> is provided that utilizes this framework.</p>
<h1 id="sample">Sample form with Client-side validation.</h1>
<p><b>Try it out!</b></p>
<ol>
<li>Enter in invalid text and submit. Reset form.</li>
<li>Enter in valid text and submit. Reset form.</li>
<li>Turn on debug and repeat step 1 and 2.</li>
<li>Turn off debug and turn on override. Enter errors and submit. Submit again. Reset form.</li>
<li>Turn off override. Turn off message box. Enter errors and submit. Reset form.</li>
<li>Turn on show errors in form element. Enter errors and submit. Reset form.</li>
<li>Change icon and turn on message box. Enter errors and submit. Reset form.</li>
</ol>
<b>Validation Options:</b><br/>
<input type="checkbox" onClick="debugValidation=!debugValidation">Debug</input>
<input type="checkbox" name="selectFocus" checked
onClick="selectOnFocus=!selectOnFocus">Select Element On Focus</input>
<input type="checkbox" checked
onClick="useMessageBox=!useMessageBox;showError.disabled=useMessageBox;selectFocus.disabled=!useMessageBox;">Use Message Box</input>
<input type="checkbox" onClick="allowOverride=!allowOverride">Allow Override</input>
<input type="checkbox" name="showError" disabled
onClick="showErrorInFormElement=!showErrorInFormElement">Show Errors In Form Element</input>
<br/>
Severity: <input type="radio" name="severity" onClick="severityGif=this.value" value="info">Info</input>
<input type="radio" name="severity" onClick="severityGif=this.value" value="warn">Warn</input>
<input type="radio" name="severity" onClick="severityGif=this.value" checked value="critical">Critical</input>
<td></tr></table></center>
<center><table width="95%">
<tr><td width="100%">
<div id="errMsg" name="errMsg" class="clsCSErrors" style="visibility: visible;"></div>
</td></tr>
<tr>
<td width="50%">
<!-- form -->
<form id="myFrm" name="myFrm" onSubmit="return csvValidate(this.id, severityGif, debugValidation,
useMessageBox, selectOnFocus, allowOverride, showErrorInFormElement, null);"
onReset="return csvResetForm(this.id)"
action="#sample">
<br />
<center>
<table cellpadding="0" cellspacing="2" border="0">
<tr> <td colspan="2"><center>* - indicates required</center></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_AnyValue">* Any Value:</td>
<td><input type="text" name="a" id="r_AnyValue" value="9"/><!-- required --></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Ssn">SSN:</td>
<td><input type="text" name="c" id="ssn_Ssn" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Integer">Integer:</td>
<td><input type="text" name="d" id="int_Integer" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Alpha">Alpha:</td>
<td><input type="text" name="e" id="alp_Alpha" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Alpha.Numeric">Alpha Numeric:</td>
<td><input type="text" name="f" id="aln_Alpha.Numeric" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Zip">Zip:</td>
<td><input type="text" name="f" id="zip_Zip" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Date">Date:</td>
<td><input type="text" name="g" id="dat_date" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Email">Email:</td>
<td><input type="text" name="g" id="eml_email" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Money">Money:</td>
<td><input type="text" name="g" id="mny_money" value=""/></td>
</tr>
<tr>
<td class="cls_Label" id="lbl_Double">Double:</td>
<td><input type="text" name="g" id="dbl_double" value=""/></td>
</tr>
</table>
<table border="0" cellpadding="4" cellspacing="0" width="100%">
<tr>
<td align="center">
<input type="submit" id="submit" value="Submit">
<input type="reset" id="reset" value="Reset">
</td>
</tr>
</table>
</center>
</form>
</td></tr>
<tr><td><center><table><tr><td>
<a class="cls_Link" target="cbeRefWin" href="cbe_reference.html"
onclick="if(window.cbeDebugJsLoaded)cbeRefWindow('javascript/cbe/docs/');return false"
title="CBE Reference Window">Reference</a><br/>
<a class="cls_Link" href="#"
onclick="if(window.cbeDebugJsLoaded)cbeDebugWindow('javascript/cbe/');return false"
title="CBE Debug Window">Debug</a><br/>
<a class="cls_Link" href="#"
onclick="if(window.cbeDebugJsLoaded)cbeTileWindows('javascript/cbe/');return false"
title="Tile the CBE Debug and Application Windows">Tile Debug and Reference</a><br/>
</td></tr></table></center></td></tr>
</table></center>
<center>
<table><tr><td>
<br><br>
<b>Main validation function (csvValidate(args)) signature -</b><br/><br/>
<pre>
/*
* Validate a form's input fields. It will gather all input form elements and validate their fields.
* If override is allowed, then it will compare new errors with old and if they are
* the same and none of the errors are required, user can choose to still submit the form.
*
* frm - Form element id string
* severity - severity of error ('warn', 'critical', 'info')
* debug - boolean, if true, then alert statements will be produced.
* displayWithMarker - if true, displays error message using marker; otherwise,
* display where labels are
* selectElement - if true, when person selects error link, it will focus and display
* allowOverride - if true, user can override errors and submit the form
* showErrorsInElement - if true, error message will be in input element
* btnArary - button array you want disabled while processing
*/
function csvValidate(frm, severity, debug, displayWithMarker, selectElement,
allowOverride, showErrorsInElement, aBtnArray) {
</pre>
</td></tr></table>
<table border=1>
<tr><td colspan="3">
<b>Note:</b><br>
Character "<font color="red"><b>r</b></font>" before any of the below-mentioned notations makes the field mandatory.<br><br>
</td></tr>
<tr>
<th>Field Type</th><th>Notation</th><th>Example Field ID</th>
</tr>
<tr>
<td align="center">Number Field</td><td align="center">int</td><td align="center">int_DriverLicense</td>
</tr>
<tr>
<td align="center">String Field</td><td align="center">alp</td><td align="center">alp_FristName</td>
</tr>
<tr>
<td align="center">Alpha Numeric Field</td><td align="center">aln</td><td align="center">aln_Street</td>
</tr>
<tr>
<td align="center">Zip Code Field</td><td align="center">zip</td><td align="center">zip_PostalZone</td>
</tr>
<tr>
<td align="center">Date Field</td><td align="center">dat</td><td align="center">dat_DateOfBirth</td>
</tr>
<tr>
<td align="center">Email Field</td><td align="center">eml</td><td align="center">eml_EmailAddress</td>
</tr>
<tr>
<td align="center">SSN Field</td><td align="center">ssn</td><td align="center">ssn_SocialSecurityNumber</td>
</tr>
<tr>
<td align="center">Money Field</td><td align="center">mny</td><td align="center">mny_RegistrationFee</td>
</tr>
<tr>
<td align="center">Double Number Field</td><td align="center">dbl</td><td align="center">dbl_DoubleNumber</td>
</tr>
</table>
</center>
<br/><br/>
<center>
<table width="75%"><tr><td>
<h1>Extra Information</h1></td></tr>
<tr><td>
<p>This software is licensed under the LGPL. See opensource.org for more information.</p>
<p>Note, the source files are provided in a readable format. They are not in a compact form to minimize size and file load.
When you include these files, your browser will cache them so the impact is only once. In addition, this non-compact
form is more legible. If you prefer a compact form, then feel free to compact it.</p>
<p><b>Client feedback using the following browsers:</b></p>
<ul>
<li>IE 6 - no problem</li>
<li>Phoenix - no problem</li>
<li>Mozilla 1.2.1 - no problem</li>
<li>NS 4.7 - doesn't work</li>
<li>NS 7, Opera 7 - minor bug (highlighted of errors)</li>
</ul>
<center>
<a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=74881&type=1" width="88" height="31" border="0" alt="SourceForge.net Logo"></a>
<a href="http://www.cross-browser.com">Cross-Browser</a>
<a href="http://lists.sourceforge.net/lists/listinfo/csv-user">Mailing list</a></center>
</td></tr>
</table>
</center>
</body>
</html>
nav_csv-0.9.zip 
