english italiano   Home Download | Support


Documentation

Learn by example

Support

Getting started

Yav setup is fast and easy. Here are the steps:

1. (optional) Set the configuration values in yav-config.js file;

2. Include javascript files into your page:

<head>
    <script src="yourPath/yav.js"></script>
    <script src="yourPath/yav-config.js"></script>
</head>

3. (optional, since yav 2.0) If you want to enable the advanced features add an onload event to your page, something like this:

<body onload="yav.init('formName', rules);" >

4. Add your validation rules for each field you want validated.
You simply have to create an array with your rules, something like this:

<script>
    var rules=new Array();
    rules[0]='username|required';
    rules[1]='password|minlength|8';
    ... and so forth ...
</script>

5. Add yav.performCheck(formName, rules, alertType) function call to your form.
This function returns true if validation succeeds, false otherwise. You can use it like you prefer, for example:

<form onsubmit="return performCheck('formName', rules, 'classic');">
It accepts these parameters:
  • formName: the form name you have to validate;
  • rules: the array of rules you have to validate;
  • alertType: the type of error notification.
alertType accepts following values:
  • classic: shows the error messages in a javascript alert;
  • innerHtml: shows the error messages into the page;
  • inline: shows the error messages near to the field not validated (when it's possible);
  • jsVar: set the jsErrors variable with the array of error messages (undefined if validation succeeds).
For innerHtml, inline and jsVar types you have to create a DIV element into your page with id equals to the value of errorsdiv variable in yav-config.js file, something like this:
<div id=errorsDiv></div>
For inline type you have to create a SPAN element for each field, with id equals to the value of errorsdiv variable in yav-config.js file, concatenated with the field name; something like this:
<span id=errorsDiv_fieldName></span>