Getting Started with JS Auto Form Validator

Getting Started

After you installed Form Validator, you have to perform following steps:

1.1 Step 1. Creating a new instance of object.

To start work with Form Validator you have to create a new instance of object. This code may be placed between <head> and </head> tags of your HTML page.
<SCRIPT type="text/javascript" src="jsafv/lang/jsafv-en.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jsafv/form.scripts.js"></SCRIPT>

<SCRIPT type='text/javascript'>
   /* create new instance of object */
   var jsFormValidator = new FormValidator();
   /* optional - true or false (default) - handle all fields separately or not */  
   /* optional - true or false (default) - handle hidden fields or not */ 
   /* optional - "." (default) or "," - decimal point delimiter */  
   /* optional - "popup" or "div" */
   /* optional - "popup" (default), "outputContainer" or "singleError" */
   /* "div" - deprecated */
   /* optional - set ID of <DIV> for errors output container */   
   /* optional - "prefixes" (default) or "attributes" */>

1.2 Step 2. Creating HTML form.

Now create HTML form with form elements and submit button. Define appropriate form name: name="", action path action="" and submission method: method="". If you want to output warning messages in <DIV> container, define after <FORM> tag following code: <div id="divErrors"></div>
<FORM name="form_name" action="result.html" method="get">
   <DIV id="divErrors"></DIV>
    ... your fields here
   <INPUT type="submit" value="Submit" name="butTest" />

1.3 Step 3. Linking a Submit button.

To link your Submit button on the form to handler of validation process - just copy the lines below and paste them before the </form> tag, where form_name is a name of your form tag on the page.

There are 6 parameters in onSubmitCheck() function:

- 1st parameter (required) - form name
- 2nd parameter (optional, default - false) - handle all fields together or handle each field separately
- 3rd parameter (optional, default - false) - handle hidden fields or not
- 4th parameter (optional, default - ".") - decimal point delimiter
- 5th parameter (optional, default - "popup") - "popup", "outputContainer" or "singleError" - type of output alert
- 6th parameter (optional) - ID of DIV errors container
- 7th parameter (optional, default - "errors") - - "default", "all" or "off" highlight mode
   onclick="return jsFormValidator.onSubmitCheck(document.forms['form_name'])" /> 

1.4 Step 4. Defining fields for validation.

There are two modes available to define field for validation: "prefixes" (default) and "attributes".

"Prefixes" mode:

To define fields for validation process, you need to give them a special prefix. The Form Validator 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 "_", for example: "_email".

This special prefix is combined from 3 letters, where:
//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 characters),       
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
For example:
<!-- this field will not be checked -->
<INPUT type="text" name="_postcode" value="" />
<!-- required text field -->
<INPUT type="text" name="rty_username" value="" />
<!-- required email field -->
<INPUT type="text" name="rey_email" value="" /> 
<!-- non-required positive float number field -->
<INPUT type="text" name="sfp_price" value="" /> 

"Attributes" mode:

In this mode to define fields for validation process, you need to give them a special attribute. The Form Validator will automatically recognize each field and validation type, according to this attribute. If you don't want some field will be checked by Form Validator, just define required="true", for optional field simply write nothing.

To specify field data type define appropriate value with data-type attribute, for example: data-type="integer". To define a subtype, write data-subtype atrribute with one of possible values, for example: data-subtype="positive". Put your attention on the fact, that some data types like "integer" may be defined in a few ways: "int" or "integer".
// Requred field:

// Data type: data-type=""
ip-address   alphanumeric   verified        c-checked   alpha|alphabetic 
float        int|integer    login|username  phone       regexp|regular-expression
numeric      password       ssn             text        radio|radiobutton
url          template       any                         zipcode|postcode
// Data sub-type: data-subtype=""
for numbers:   signed, unsigned, positive, negative
for strings:   upper, lower, normal, any
for telephone: mobile, fixed, international, any

1.5 Step 5. Captcha_validation.

There are two types of Captcha: "random" and "math".

To use Captahca you have to do following: 1. Define Captahca settings:
<SCRIPT type='text/javascript'>
  var jsFormValidator = new FormValidator();
  jsFormValidator.captchaSettings("txtCaptcha", "txtCaptcha", false);
  // for Math Captcha
  // jsFormValidator.captchaSettings("txtCaptcha", "txtCaptcha", false, "math");
<BODY onload="jsFormValidator.captchaDraw();">
2. Create Captcha fields:
<SPAN id="txtCaptcha"></SPAN>
<INPUT type="button" id="btnRefresh" value="Refresh" onclick="jsFormValidator.captchaDraw(true);" />
3. Add Captcha validation to form submit button:
onclick="return(jsFormValidator.onSubmitCheck(document.forms['frmTest']) && jsFormValidator.captchaValidate())"
type="submit" value="Submit" name="butRegister" />

2. Additional Info

2.1 Usage of "title" attribute.

Attribute title="" 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 name="" 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! )

Example 1:
<INPUT type="text" name="rty_username" value="" />
Text message that will appear:
"The <_username> is a required field! Please enter a valid <_username>."

Example 2:
<INPUT type="text" name="rty_username" title="First Name" value="" />
Text message that will appear:
"The <First Name> is a required field! Please enter a valid <First Name>."

2.2 Usage of "minlength"/"maxlength" attributes.

Attribute minlength="" is used to define a minimum length of entered text.

<INPUT type="text" name="rty_username" title="Username" minlength="5" value="" />
<INPUT type="text" name="rty_username" title="Username" maxlength="25" value="" />
Text message that will appear:
"The <Username> must be at least 5 characters long!"

2.3 Usage of "inclusion"/"exclusion" attributes.

Attribute inclusion="" is used to check whether required string is presented in the field value
For example:
<INPUT type="text" name="stDomain" title="Domain" inclusion="http://" value="" />
Text message that will appear:
"The text you've entered doesn't include required string http://! Please, re-enter."

Attribute exclusion="" is used to check whether required string is absent in the field value
For example:
<INPUT type="text" name="stDomain" title="Domain" exclusion="www." value="" />
Text message that will appear:
"The text you've entered must not include this string <www.>! Please, re-enter."

2.4 Non-documented methods.

"stripHtmlTags" - strips the HTML tags before the form is submitted.

3. Plugins

3.1 Usage of plugins.

A plugin is a component that adds a specific feature to Form Validator. You may use existing plugins when you need extended functionality of the script or develop your own plugins. Physically all plugins represent a classes (single files), that are placed in directory with the same name "plugins/".

To use plugins as an extended functionality of the validator you have to explicitly load them. See the example below:
Now you may define fields for validation:
<SELECT name="card_name">
<OPTION value="Visa">Visa</OPTION>
<OPTION value="MasterCard">MasterCard</OPTION>
<OPTION value="DinersClub">DinersClub</OPTION>
<OPTION value="AmEx">American Express</OPTION>
<OPTION value="VisaElectron">VisaElectron</OPTION>

<INPUT type="text" name="card_number" title="Credit Card Number"
   required="true" data-type="creditcard" data-card-name="visa" maxlength="30" />

Create Your Free Account
Please remember that this information is essential to use our services correctly.
After creating the account you will be able to download all of our FREE products.
Fields marked with * are mandatory

Please send me information about updates, new products, specials and discounts from ApPHP!
We recommend that your password should be at least 6 characters long and should be different from your username/email. Please use only letters of the English alphabet to enter your name.

Your e-mail address must be valid. We use e-mail for communication purposes (order notifications, etc). Therefore, it is essential to provide a valid e-mail address to be able to use our services correctly.

All your private data is confidential. We will never sell, exchange or market it in any way. Please refer to Privacy Policy.

By clicking "Create Account", you are indicating that you have read and agree to the ApPHP Terms & Conditions.