Validity – jQuery Plugin and Agile Toolkit

Thursday, August 5th, 2010|Beginner tips|by Romans

I stumbled upon a interesting jQuery plugin called Validity. Syntax seemed straightforward so I decided to see how long it takes to integrate it into Agile Toolkit.

http://validity.thatscaptaintoyou.com/

See demo here: http://demo.atk4.com/validity.html

Set up

First – I needed a form. So I wrote a simple page for Agile Toolkit.

[php]
$f=$this->add(‘Form’);
$veh=$f->addField(‘line’,'veh’,'Number of Vehicles’);
$dob=$f->addField(‘line’,'birth’,'Date of birth’);
$f->addSubmit();
[/php]

Downloading

I was following documentation of Validity plugin and downloaded zip. I could have simply included the <script> and <style> includes into shared.html, but I decided to load them dynamically from the page (on demand)

[php]
$f->js(true)
->_load(‘jquery.validity.pack’)
->_css(‘jquery.validity’)
[/php]

JavaScript code used for form validation on author’s page goes like this:
                        $("#vehicles")
                            .require()
                            .match("number")
                            .range(4, 12);

                        $("#dob")
                            .require()
                            .match("date")
                            .lessThanOrEqualTo(new Date());

All this must be wrapped into a function and passed to: $(‘form’).validity( .. );

The equivalent code through PHP looks like this:

[php]
$f->validity(
$veh->js(null,
$dob->js()->require()->match(‘date’)->lessThanOrEqualTo($f->js(null,’new Date()’))
)->_enclose()->require()->match(‘number’)->range(4,12)
);
[/php]

Result

Demo: http://demo.atk4.com/validity.html
Here is again – full PHP source:
[php]</div>

$f=$this->add(‘Form’);
$veh=$f->addField(‘line’,'veh’,'Number of Vehicles’);
$dob=$f->addField(‘line’,'birth’,'Date of birth’);
$f->addSubmit();

$f->js(true)
->_load(‘jquery.validity.pack’)
->_css(‘jquery.validity’)
->validity(
$veh->js(null,
$dob->js()->require()->match(‘date’)
->lessThanOrEqualTo($f->js(null,’new Date()’))
)->_enclose()->require()->match(‘number’)->range(4,12)
);
[/php]

I hope you will find this helpful.

5 Comments

zak
Posted August 18, 20108:28 am

This is helpful but IMO the JS code below is a mess. I don’t think its straight forward. Its not so easy to write it. Maybe we can develop this in a more logical fashion directly in Form_Field?

romans
Posted August 19, 20103:59 pm

This is just example how 3rd party plugin can be integrated with ATK.

I suppose you can hide this plugin inside your form class and do the calls automatically when new validation rules are applied.

I myself am not a big fan of js-validation, i prefer to validate form on submission and return JS code which highlights field with the error. Two birds with one stone.

:wink:

zak
Posted August 20, 201010:17 pm

Yeah … both approaches are good … but I prefer JS validation for 1 reason – its faster :) , But as I see from latest atk implementation .. with AJAX also errors show up fast.

romans
Posted August 21, 201012:52 am

PHP is pretty amazing on fast response times. Our new atk4-based site (www.agiletech.ie) with full-blown content management, widgets, easily does 50 requests per second. This blog (WordPress) pulls through 9 requests per second in same conditions. None of them use cache.

romans
Posted August 21, 201012:56 am

I also tried to measure https://sortmybooksonline.com/ which have VERY solid back-end. 12 requests per sec. And it feels much more responsive inside too.

Another test: http://demo.atk4.com/grid_columns.html
came with 79 requests per second.