This topic is locked
[SOLVED]

 Client side validations

3/17/2010 10:54:18 PM
PHPRunner General questions
E
electromotive author

Client-side validations use javascript to provide guidance/feedback to the user while they type. It's a web 2.0 thing, not neccessarily involving AJAX. These work in conjunction with the server-side validation rules which have the final say. PHPR supports server-side validations quite well, however support for client-side validation could still be improved.
Client-side validations provide context-sensitive guidance, can dynamically tab between fields, verify if the format is correct while you type, shift case as you type, add punctuation, depending on certain fields make other fields read-only or "fold" sections which are irrelevant, change the background color or font to highlight while you are filling out a form, provide context sensitive hints (hovertext), etc., all without requiring a page refresh from the server. It could support an intelligent interface to a barcode scanner (which appears like keyboard input) by ensuring that the scanned code goes into the correct field. Lots of good reasons to use client-side validations and custom javascript.
However, support for javascript coding could be improved. IMO Probably the single biggest issue now is finding out the field names. In changing from 5.1 to 5.2, the field and form names changed. If you add master/detail on edit/add forms, the field names change again. This implies a lot of maintenance and programming knowledge to code in/support largely simple and repetitive functions and rules.
Providing a higher level of support for basic/standard client-side controls would propel PHPR/ASPR right to the forefront. Could start by eliminating the need to find out/track the low level DOM field names, by adding something to refer symbolically to the fields, something like template language. Let the generator and runtime resolve the field names, as it knows best.
So maybe instead of requiring code like this:
document.forms.editform1.value_my-fieldA_1.style.backgroundColor='Yellow';
Have something like this:
{|my-fieldA|}.backgroundColor='Yellow';
or another example:

instead of: if (...) document.forms.editform1.value_my-fieldB_1.focus();

have: if (...) {|my-fieldB|}.focus();
A next (second) thing which would be helpful is a place on the editor tab for the custom javascript, besides adding to the bottom of the HTML, so that it would survive a page reset and would eliminate the need to keep a separate copy outside of PHPR/ASPR. But this is minor compared to determining the field names.
This would be a small but useful step towards providing support for client-side validations (custom javascript). Do you think something like this is possible in the near future?
Some discussion from seasoned client-side coders is invited.

Cheers

Sergey Kornilov admin 3/18/2010

I have good news. There is already Javascript API in PHPRunner 5.2 that allows to access form fields and we use it for all internal needs. Updated manual will be available shortly.
Here is an example of how it works. This code can be added to Javascript event OnLoad. This code enables States dropdown if US selected as a country.

// table name

var tName = 'carsmake';
// field name

var fName = 'country';
var ctrlCountry = Runner.controls.ControlManager.getAt(tName, pageid, fName);
var ctrlState = Runner.controls.ControlManager.getAt(tName, pageid, 'state');
ctrlCountry.on('change', function(e){

if (this.getValue() == 'US'){

ctrlState.setEnabled();

}else{

ctrlState.setDisabled();

}

});
E
electromotive author 3/21/2010

This is really great news.

I tried your code snippet using the cars database, adding country and state. Works fine.
I'll eagerly await some documentation, and figure out how to test fields using RegExp, setfocus, change field background & font color, etc etc. I see some functions defined in runnerJS\Control.js such as setEnabled, setDisabled, setFocus, setValue, getValue, isEmpty and addStyle. An example of using addStyle would be quite useful.
This feature will give a good user experience. Thanks again.

A
aalekizoglou 3/23/2010



This is really great news.

I tried your code snippet using the cars database, adding country and state. Works fine.
I'll eagerly await some documentation, and figure out how to test fields using RegExp, setfocus, change field background & font color, etc etc. I see some functions defined in runnerJS\Control.js such as setEnabled, setDisabled, setFocus, setValue, getValue, isEmpty and addStyle. An example of using addStyle would be quite useful.
This feature will give a good user experience. Thanks again.


I agree these are great news. It will be of great help in writing javascript events.

R
rodny 3/24/2010



PHPR supports server-side validations quite well, however support for client-side validation could still be improved.
Client-side validations provide context-sensitive guidance, can dynamically tab between fields, verify if the format is correct while you type, shift case as you type, add punctuation, depending on certain fields make other fields read-only or "fold" sections which are irrelevant, change the background color or font to highlight while you are filling out a form, provide context sensitive hints (hovertext), etc., all without requiring a page refresh from the server. It could support an intelligent interface to a barcode scanner (which appears like keyboard input) by ensuring that the scanned code goes into the correct field. Lots of good reasons to use client-side validations and custom javascript.


Hello,

I am newbie in PHPRunner 5.2 and PHP itself... I'm very interested and learnig the client-side validations codes that electro rick mentioned here.
Is it possible that you post some examples of this codes? A step by step tutorial of how to make work of things like "dynamically tab between fields, verify if the format is correct while you type, shift case as you type, add punctuation, depending on certain fields make other fields read-only"

Thank you
Rodny <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=48753&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

E
electromotive author 3/26/2010



Is it possible that you post some examples of this codes? A step by step tutorial of how to make work of things like "dynamically tab between fields, verify if the format is correct while you type, shift case as you type, add punctuation, depending on certain fields make other fields read-only"


In general the ADD/EDIT type operations in a real complex database application environment require quite a bit of logic, logic to encode the business rules and the referential integrity rules of the database. Every situation in unique. Until recently in a PHP/SQL environment these rules were exclusively handcoded on the server side. PHPR provides some code generation (without coding) for validations and while good some complex rules still may have to be hand-coded, and a facility exists for adding your own PHP code via Events. The only disadvantage of server-side code is that it takes a roundtrip and screen refresh, and while effective this can be a bit slow, basic and primitive looking.
Now in an effort to look better, speed things up and to improve the user experience, developers are putting additional logic into the client. PHPR is now starting to add (generate) some client-side validations, such as "required" and field dependent lookups. These built-in features will no doubt be extended over the coming year. However, for developers needing more advanced client-side functionally now, they must handcode the javascript required. Anticipating the demand for more client-side functionality the PHPR developers have developed an API. The API is intended to make the generation and handcoding of Javascript easier and durable. Sergey has offered an example above which uses several functions. I have managed to "guess" a few more, but the javascript API is new and will be documented shortly and more examples will be forthcoming. Watch this space !!

Sergey Kornilov admin 3/26/2010
R
rodny 3/28/2010



I have good news. There is already Javascript API in PHPRunner 5.2 that allows to access form fields and we use it for all internal needs. Updated manual will be available shortly.
Here is an example of how it works. This code can be added to Javascript event OnLoad. This code enables States dropdown if US selected as a country.

// table name

var tName = 'carsmake';
// field name

var fName = 'country';
var ctrlCountry = Runner.controls.ControlManager.getAt(tName, pageid, fName);
var ctrlState = Runner.controls.ControlManager.getAt(tName, pageid, 'state');
ctrlCountry.on('change', function(e){

if (this.getValue() == 'US'){

ctrlState.setEnabled();

}else{

ctrlState.setDisabled();

}

});



Hi,

I'm trying to use the code mentioned but when I click the Check Syntax button, I get the error message syntax error, unexpected T_VAR in line 2

Why is that? Can some body help me please.
Rodny <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=48847&image=1&table=forumreplies' class='bbc_emoticon' alt=':(' />

E
electromotive author 3/28/2010



Hi,

I'm trying to use the code mentioned but when I click the Check Syntax button, I get the error message syntax error, unexpected T_VAR in line 2

Why is that? Can some body help me please.
Rodny <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=48850&image=1&table=forumreplies' class='bbc_emoticon' alt=':(' />



Hi Rodny

Mine is error-free. Tell you what I've done and see if that helps you out.

  • I'm using PHPRunner 5.2 Build 5197 (or later, but this will probably work on any 5.2 build).
  • Using the supplied Cars template I've created the DB and loaded up the Cars project. This should work.
  • I modified the carsmake table to add country and state.
  • I've added some lookup validation for country and state using "list of values". Eg, Japan, Germany, US, ..., and Michigan, California, ...
  • If necessary, reset the page (no harm unless layout has been modified)
  • On carsmake table events, "Add Page: Javascript OnLoad event" I put Sergey's code snippet, exactly.
  • Check syntax? No errors. Build. Run. Works precisely.
  • I've updated/added records to include some cars, countries and states in the US.
  • If country is not US, then state is disabled.
    Don't know what else to suggest.
    In practice, same code should be added to edit page, however also needs to read country value "onload" and disable state if US. Same extended code can be used for both events.
    Rick

E
electromotive author 3/28/2010



Here it is:

http://xlinesoft.com/phprunner/docs/javascript_api.htm



Wonderful. Thanks.
First question. Ctrl.On(event...

Possible events: blur, change, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, resize, select.
Cross browser support: Can I assume that we can get all these events on all supported browsers? (IE6-8, FF, Chrome, Safari?? etc.)

Or should I be browser aware, only expect a subset for each browser, and if so whats a good way to detect the browser?

Or should I combine certain events such as Change and Keyup so that it will work with any browser? If so, how do I combine the events Change and Keyup, for example?
http://www.quirksmode.org/dom/events/index.html

J
Jane 4/2/2010

Hi,
yes you can use this sampel for all events.
To define one function for two events (onchange and onkeyup for example) just re-write this function twice:

ctrlCountry.on('change', function(e){

if (this.getValue() == 'US'){

ctrlState.setEnabled();

}else{

ctrlState.setDisabled();

}

});

ctrlCountry.on('keyup', function(e){

if (this.getValue() == 'US'){

ctrlState.setEnabled();

}else{

ctrlState.setDisabled();

}

});