How it works
Ok, so you've seen the example on the home page, or all the examples on the examples page, but now you want to know how to use it. Let's take as example the "live" example on the homepage.
Step 1: The form
Just start out with your form, for example
<form name='frmTestLive' id='frmTestLive' action='' method='post'> <input type='hidden' name='action' value='send_test_form'> I dare you to say "hello" <p> <input type='text' id='test_hello' name='test_hello' value=''> <input type='submit' value='press me'> </p> </form>
Step 2: Define the rules (PHP)
The rules are stored in a Array. This is the Array I've used.
$formRules["frmTestLive"]=array(
"test_hello" => array
(
"args"=>array("validMessage"=>"Ait you go girl!"),
"rules"=>array
(
array
(
"method"=>"Validate.Presence",
"args"=>array()
),
array
(
"method"=>"Validate.Format",
"args"=>array("pattern"=>"/^hello$/i","failureMessage"=>"Chicken!That was not a hello")
),
)
),
);
So what are we looking at? First you create a random array (in this case "frmTestLive").
Now create an Array within the frmTestLive array. Now this is important!. Look at the HTML code and notice the input-field id ( id='test_hello' ). You must use this id to name the array so : "test_hello" => array.
Now the "test_hello" Array can have 3 keys :
- args (array)
- display (string)
- rules (array)
The "args" key passes some arguments to the element. This can be best illustrated according the next javascript sample:
var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );
Here you see the argument "validMessage" passed to the LiveValidation object.
The "display" key is optional. When you there's a serverside validation and the validation fails you can expect a error message something like this :
[element_name] error message for example [test_hello] error message
But this not readable for humans, so you can supply a display so your visitors will see wich element raised the error.
So your Array could be like this:
$formRules["frmTestEmail"]=array(
"email_field" => array
(
"args"=>array("validMessage"=>"Yes this is a valid Email"),
"display"=>"Email",
"rules"=>array
(
array
(
"method"=>"Validate.Presence",
"args"=>array()
),
array
(
"method"=>"Validate.Email",
"args"=>array("failureMessage"=>"Supply an email!"))
),
)
),
);
So if you look at the sample above, when the serverside validates and the there's an error, you will see this:
[Email] Supply an email!
instead of :
[email_field] Supply an email!
But in my "live" example I didn't use the "display" key.
Next up are the rules it self. They are stored in the key "rules".Each rule is an Array witch has 2 keys :
- method
- args
The "method" key
The "method" key defines what the validate will be. If you have read the documentation on the livevalidation website you will see lines for example:
f1.add( Validate.Presence );
And notice the value I've used for the "method" key. Yep, it's the same.
The "args" key
The "args" key are the arguements you want to pass to the validator. Now take this javascript :
f2.add( Validate.Format, { pattern: /live/i } );
As you can see, the method is "Validate.Format", the arguement(s) are "pattern" with the value /live/i. Now I have a different pattern:
array
(
"method"=>"Validate.Format",
"args"=>array("pattern"=>"/^hello$/i","failureMessage"=>"Chicken!That was not a hello")
),
And I've added a extra key "failureMessage". This message will appear when the validation fails.
Step 3: Create the PHP objects
So you've setup the rules, now it's time to create the PHP object
$html="";
$frmTestLive=new LiveValidationMassValidatePHP("frmTestLive",$_POST);
$frmTestLive->addRules($formRules["frmTestLive"]); // get the rules
$html=$frmTestLive->generateAll();
print "<script>";
print $html;
print "</script>";
Remember the HTML code? You will see the form id is named "frmTestLive". We'll use that for the LiveValidationMassValuidatePHP and also pass the $_POST results :
$frmTestLive=new LiveValidationMassValidatePHP("frmTestLive",$_POST);
Next up is to pass the rules
$frmTestLive->addRules($formRules["frmTestLive"]); // get the rules
And now, generate the Javascript and print it
$html=$frmTestLive->generateAll(); print "<script>"; print $html; print "</script>";
Step 4: Serverside validation
You now have generated the Javascript, now you want to catch the values and validate when the user has (with succes) submitted the form. This is an example:
$frmTestErrors=array();
$frmTestErrors=$this->frmTestLive->validate();
if(count($frmTestErrors)>0)
{
print_r($frmTestErrors);
}
Wrap it up
So there you have it. If you download the script, you will find some other examples. FYI Just as most developers, me and documentation don't mix well ;-), but I'm planning to get some documentation ... soon ;-)