<html>
<head>
<title>ApPHP :: JS Auto form Validator :: Getting Started</title>
<style>
UL LI { font-family:verdana,arial,sans-serif; font-size:13px; padding:1px 0; }
PRE { background-color:#e2e3e4; padding:5px; border:1px solid #d3d4d5; }
DIV.top { float:right; margin-left:5px; }
SPAN.comments { color: #005600; }
a { color:#616263; }
a:hover { color:#000; }
</style>
</head>
<body style="padding:5px 15px 15px 15px;">
<!-- last changing 26.09.2012 -->
<div class="box">
<h2>Getting Started with JS Auto Form Validator</h2>
<div class="holder">
<div class="frame-box">
<div class="blocks-holder blocks-subholder">
<div class="block-long">
<div class="text-box">
<ul style="padding-left:1px;list-style:none;font-size:14px;">
<li>
<span>1.</span> <a href="GettingStarted.html#Getting_Started_with_JS_AFV"><span>Getting Started with JS Auto Form Validator</span></a>
<ul style="list-style:none;">
<li><span>1.1</span> <a href="GettingStarted.html#Step_1._Creating_new_instance_of_object"><span>Step 1. Creating a new instance of object.</span></a></li>
<li><span>1.2</span> <a href="GettingStarted.html#Step_2._Creating_HTML_form"><span>Step 2. Creating HTML form.</span></a> </li>
<li><span>1.3</span> <a href="GettingStarted.html#Step_3._Connecting_submit_button"><span>Step 3. Connecting a Submit button.</span></a> </li>
<li><span>1.4</span> <a href="GettingStarted.html#Step_4._Defining fields_for_validation"><span>Step 4. Defining fields for validation.</span></a></li>
</ul>
</li>
<li>
<span>2.</span> <a href="GettingStarted.html#Additional_Info"><span>Additional Info</span></a>
<ul style="list-style:none;">
<li><span>2.1</span> <a href="GettingStarted.html#2_1._Usage_Title_attribute"><span>Usage of "title" attribute.</span></a></li>
<li><span>2.2</span> <a href="GettingStarted.html#2_2._Usage_Minlength_attribute"><span>Usage of "minlength" attribute.</span></a></li>
<li><span>2.3</span> <a href="GettingStarted.html#2_3._Usage_inclusion_exclusion_attributes"><span>Usage of "inclusion/exclusion" attributes.</span></a></li>
</ul>
</li>
</ul>
<br />
<a name="Getting_Started_with_JS_AFV"></a>
<h3 class="sub-title">Getting Started</h3>
<br>After you have JS AFV installed, you need to perform following steps: </p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="Step_1._Creating_new_instance_of_object"></a>
<h3><b>1.1 Step 1. Creating a new instance of object.</b></h3>
<hr />
To start work with Form Validator you have to create a new instance of object. This code may be placed
between <b><head></b> and <b></head></b> tags of your HTML page.<br />
<pre>
<SCRIPT type='text/javascript' src='jsafv/lang/jsafv-en.js'></SCRIPT>
<SCRIPT type='text/javascript' src='jsafv/form.validator.js'></SCRIPT>
<SCRIPT type='text/javascript'>
<span class="comments">/* create new instance of object */</span>
var jsFormValidator = new FormValidator();
<span class="comments">/* optional - true or false (default) - handle all fields separately or not */</span>
jsFormValidator.setHandleAllFields(false);
<span class="comments">/* optional - true or false (default) - handle hidden fields or not */ </span>
jsFormValidator.setHandleHiddenFields(false);
<span class="comments">/* optional - "." (default) or "," - decimal point delimiter */ </span>
jsFormValidator.setDecimalPointDelimiter(".");
<span class="comments">/* optional - "popup", "outputContainer" or "singleError" */</span>
jsFormValidator.setOutputAlert("popup");
<span class="comments">/* optional - ID of errors <DIV> container */</span>
jsFormValidator.setOutputContainer("divErrors");
</SCRIPT>
</pre>
<p><br /></p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="Step_2._Creating_HTML_form"></a>
<h3><b>1.2 Step 2. Creating HTML form.</b></h3>
<hr />
Now create HTML form with form elements and submit button.
Define appropriate form name: <b>name=""</b>, action path <b>action=""</b> and submission method: <b>method=""</b>.
If you want to output warning messages in <DIV> container, define after <FORM> tag following code: <b><div id="divErrors"></div></b>
<pre>
<FORM name="form_name" action="result.html" method="get">
<DIV id="divErrors"></DIV>
<span class="comments">
...
... your fields here
....
</span>
<INPUT type="submit" value="Submit" name="butTest" />
</FORM>
</pre>
<p><br /></p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="Step_3._Connecting_submit_button"></a>
<h3><b>1.3 Step 3. Connecting a Submit button.</b></h3>
<hr />
To connect your Submit button on the form to handler of validation process - just copy the lines below
and paste them before the <b></form></b> tag, where <b>form_name</b> is a name of your form
tag on the page. <br /><br />
There are 6 parameters in onSubmitCheck() function:<br /><br />
- 1st parameter (required) - form name<br>
- 2nd parameter (optional, default - false) - handle all fields together or handle each field separately<br>
- 3rd parameter (optional, default - false) - handle hidden fields or not<br>
- 4th parameter (optional, default - ".") - decimal point delimiter<br>
- 5th parameter (optional, default - "popup") - "popup", "outputContainer" or "singleError" - type of output alert<br>
- 6th parameter (optional) - ID of DIV errors container<br>
- 7th parameter (optional, default - "errors") - highlight mode<br>
<pre>
<INPUT
type="submit"
name="button"
value="Submit"
onclick="return jsFormValidator.onSubmitCheck(document.forms['form_name'])" />
</pre>
<p><br /></p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="Step_4._Defining fields_for_validation"></a>
<h3><b>1.4 Step 4. Defining fields for validation.</b></h3>
<hr />
To define fields for validation process, you need to give them a <u>special prefix</u>.
The JS AFV will automatically recognize each field and validation type, according to this prefix.
If you don't want some field will be checked by Form Validator, just give to this field a name,
started with <b>"_"</b>, for example: <b>"_email"</b>.<br /><br />
This special prefix is combined from 3 letters, where: <br />
<pre>
First letter:
r - required, s - simple (not required)
Second letter:
n - numeric, i - integer, f - float,
a - alphabetic, t - text, e - email,
p - password, l - login, y - any (non-english text and symbols),
z - zipcode, v - verified, c - checked (for checkboxes),
u - url, s - SSN number, m - telephone
x - template b - alphanumeric, r - checked (for radiobuttons)
d - IP address g - regular expression
(for example - name="rxTemplate" template="(ddd)-ddd-dd-dd")
where d - digit, c - character
(for example - name="rtUsername" minlength="5")
where minlength - minimum length of entered text
(for example - name="stDomain" inclusion="http://")
where inclusion is a string that must present in the entered text
(for example - name="stDomain" exclusion="www.")
where exclusion is a string that must not present in the entered text
(for example - name="rgRegExpression1" reg_expression="^([0-9])+$")
where reg_expression is a regular expression string
Third letter (optional):
for numbers: s - signed, u - unsigned, p - positive, n - negative
for strings: u - upper, l - lower, n - normal, y - any
for telephone: m - mobile, f - fixed (stationary), i - international, y - any
</pre>
For example:
<pre>
<span class="comments"><!-- this field will not be checked --></span>
<INPUT type="text" name="_postcode" value="" />
<span class="comments"><!-- required text field --></span>
<INPUT type="text" name="rty_username" value="" />
<span class="comments"><!-- required email field --></span>
<INPUT type="text" name="rey_email" value="" />
<span class="comments"><!-- non-required positive float number field --></span>
<INPUT type="text" name="sfp_price" value="" />
etc.
</pre>
<p><br /></p>
<a name="Additional_Info"></a>
<h3 class="sub-title"><b>2. Additional Info</b></h3>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="2_1._Usage_Title_attribute"></a>
<h3><b>2.1 Usage of "title" attribute.</b></h3>
<hr />
Attribute <b>title=""</b> is used to pass important information to javascript code.
Generally, we use title to specify a logic name for validated field.
If attribute "title" was not defined, script will try to use a <b>name=""</b> attribute
(sometimes it doesn't help, because your field may be called "zzz_345" and your users will see a message
with something like this: Please enter a valid zzz_345! )
<br /><br />
Example 1:
<pre><INPUT type="text" name="rty_username" value="" />
</pre>
Text message that will appear:<br /> "The <_username> is a required field! Please enter a valid <_username>."
<br /><br />
Example 2:
<pre><INPUT type="text" name="rty_username" title="First Name" value="" />
</pre>
Text message that will appear:<br /> "The <First Name> is a required field! Please enter a valid <First Name>."
<p><br /></p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="2_2._Usage_Minlength_attribute"></a>
<h3><b>2.2 Usage of "minlength" attribute.</b></h3>
<hr />
Attribute minlength="" is used to define a minimum length of entered text.
<br /><br />
Example:
<pre><INPUT type="text" name="rty_username" title="Username" minlength="5" value="" />
</pre>
Text message that will appear:<br /> "The <Username> must be at least 5 characters long!"
<br /><br />
<p><br /></p>
<div style="FLOAT: right; MARGIN-LEFT: 5px">[<a href="#top">top</a>]</div>
<a name="2_3._Usage_inclusion_exclusion_attributes"></a>
<h3><b>2.3 Usage of "inclusion/exclusion" attributes.</b></h3>
<hr />
Attribute inclusion="" is used to check whether required string is presented in the field value<br />
For example:
<pre><INPUT type="text" name="stDomain" title="Domain" inclusion="http://" value="" />
</pre>
Text message that will appear:<br /> "The text you've entered doesn't include required string http://! Please, re-enter."
<br /><br />
Attribute exclusion="" is used to check whether required string is absent in the field value<br />
For example:
<pre><INPUT type="text" name="stDomain" title="Domain" exclusion="www." value="" />
</pre>
Text message that will appear:<br /> "The text you've entered must not include this string <www.>! Please, re-enter."
<p><br /></p>
</div>
</div>
</div>
<div class="frame-box-holder"></div>
</div>
</div>
</div>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
