Client-side validation

Client side validation (Javascript based) provides instant feedback to the user making it a good usability choice.

Built-in validation types

This validation will work if . . . → Read More: Validation in PHPRunner and ASPRunnerPro applications]]> Data validation is very important in web applications. You do not want your users to enter incorrect data. Our web application builders can help you with this.

Client-side validation

Client side validation (Javascript based) provides instant feedback to the user making it a good usability choice.

Built-in validation types

This validation will work if you need to make sure that all required fields are populated or validate a relatively simple data format like US Social Security Number. More info

Regular expressions

Regular expressions are both powerful and tough to master. Luckily there is a number of examples and tutorials on the web. Besides that PHPRunner and ASPRunnerPro come with built-in Regular expressions testing tool. Regular expressions to validate data formats like IP addresses or Tax IDs in some countries. More info

Custom validation plugins

When you need something more complicated i.e. algorithm based credit card number validation - custom validation plugins come to rescue. More info

Input mask

Sometimes no validation is the bet option. Turn on masked edit option in PHPRunner or ASPRunnerPro to prevent users from entering anything but correct data format. Works the best with fixed length data like phone numbers or social security numbers. More info

Edit plugins

Many custom Edit plugins, especially those that target numeric data input, come with built-in validation. Examples are Slider, Spinner and Knob plugins. All of them allow you to setup the range of input data. How to create your own Edit plugin

Server-side validation

You may have noticed that none of client side examples perform data validation against database. Server side validation overcomes this limitation. You can check entered data for duplicates or simply check if you have enough widgets in stock before letting customer to place the order. In PHPRunner/ASPRunnerPro software server side validation is typically implemented as BeforeAdd/BeforeEdit events. Here is some sample code   More info The only drawback of server is based validation is that user experience suffers. Page needs to be reloaded and in some cases user needs to scroll the page in order to find the field that didn't pass the validation.

Combined validation

Combined validation brings the best of two worlds together. You can validate data against your database without reloading the page providing instant feedback to the user. To see a real life example proceed to Xlinesoft Marketplace, add any product to the cart and click Checkout. On 'Create an account' page enter any email address that is already in the system i.e kornilov(at)gmail.com and move focus to the next field.

You will see  "Email address already exists. Login here" message once focus leaves the email field. Now user can enter another email address or sign in if registered already.

Note that if you don't change the email address and still submit the form you will get similar message that is now coming from BeforeAdd event.  It's always recommended to use both  types of validation together. This prevents the situation when user ignores the warning and submits the form anyway.

Here is how this sort of functionality can be added to your project.

1.  Modify page in Visual Editor adding a DIV tag where our message will be displayed.

<TD class="runner-cc alt runner-fixedcell">
<DIV class="fieldcontrol_email {$fielddispclass_email}">{$email_editcontrol}</DIV>
<DIV id=email-message></DIV></TD>

2. Javascript OnLoad event. This code sample assumes that field name is email

var message = 'Email address already exists.';
var ctrlEmail = Runner.getControl(pageid, 'email');
ctrlEmail.on('blur', function(e) {
	if (this.getValue()=='') {
		$('#email-message').css('display','none');
	}
	else {
	$.get("check_email.php", { email: this.getValue()}).done( function(data){
	if (data=='exists') {
		if (message!='') $('#email-message').html(message);
		$('#email-message').css('display','block');
	}
	else {
		$('#email-message').css('display','none');
	}
	})
	}
});

This code makes a call to check_email.php file via jQuery's get() function. If check_email.php file returns "exists" we display the message and make DIV visible.

Note: in ASPRunnerPro replace check_email.php with check_email.asp

3. check_email.php (.asp) code.

check_email.php file needs to be added to source subdirectory under project directory. Once you build the project it will be copied right to the output directory. Here is what we need to put into check_email.php file:

<?php
include("include/dbcommon.php");
$rs = CustomQuery("select email from LoginTable where email = '" .
    db_addslashes($_GET['email']) . "'");
if (db_fetch_array($rs))
	echo "exists";
else
	echo "";
?>

This code assumes that table name is LoginTable and field name is email.
ASP version of the same code (check_email.asp):

<%
 
%>

Note: since we process data entered by end user manually we need to take care of SQL injections attacks. Function db_addslashes() does all the job for us screening "bad" characters.

4. BeforeAdd code

$rs = CustomQuery("select email from LoginTable where email = '"
      . db_addslashes($values["email"]) . "'");
if (db_fetch_array($rs))
{
	$message = "Email address ".$values["email"]."
                 already exists. <br>Sign in or choose another email address.";
	return false;
}
$message="";
return true;

This code does the same job. We just want to protect ourself from the situation when user ignores the warning and submits the form anyway.

ASPRunner.NET 6.0 is built on the top of MVC3 framework.

Download links: http://asprunner.com/files/asprunnernet60-trial-setup.exe http://asprunner.com/files/asprunnernet60-trial-setup.zip

Here is . . . → Read More: ASPRunner.NET 6.0 preview]]> We are glad to announce a first public preview of ASPRunner.NET 6.0. This is a not a stable release, feel free to use it for evaluation purposes. We expect final version to be available in a few weeks.

ASPRunner.NET 6.0 is built on the top of MVC3 framework.

Download links:
http://asprunner.com/files/asprunnernet60-trial-setup.exe
http://asprunner.com/files/asprunnernet60-trial-setup.zip

Here is the list of features that are not implemented yet in this preview. All features below will be available in the final version.

• Right now SQL Server and MySQL databases are supported. Final version will also support Oracle, MS Access and Postgre.
• C# only. VB.NET will be available in final version.
• Charts and reports are not supported yet
• View/Edit plugins not available yet
• Export/Import pages
• Events
• View as Audio/Video
• Active Directory support
• Data Encryption
• Facebook login
• Templates like Jobs, Cars, Vacations etc
• Mobile template

Here are features that most likely won't make it in ASPRunner.NET 6.0. They will be added in next release.

• Export to PDF
• Export/Import to Excel 2007
• Web reports
• Templates pack: Shopping Cart, Members, Calendar

Let us know what you think of this update. Bug reports to be sent via our helpdesk.

We will show you how to create . . . → Read More: How to create your own Edit control plugin]]> PHPRunner 6.2 and ASPRunnerPro 7.2 add an exciting new feature - custom edit controls. You are longer limited by stock Edit controls that come with the software. And the best of all, creating new Edit controls is not complicated and we'll show how this can be done.

We will show you how to create ColorPicker and SignaturePad plugins. Before we proceed I recommend to check the following live demo that showcases both edit controls plugins. SignaturePad control works on mobile devices as well.

ColorPicker control

Lets say we want to add a color picker control that allows users select color the same way they do in Adobe Photoshop. Since our software comes with jQuery bundled we'll be searching web for "jQuery colorpicker". This search returns a number of results and the one we'll be using is miniColors. It looks nice and easy to integrate. Sources can be find at Github.

• create a new folder under <Documents>\PHPRunnerPlugins\edit named ColorPicker
• copy files EditMyField.js and EditMyField.php from 'MyField' folder to 'ColorPicker' folder
• rename those files to EditColorPicker.js and EditColorPicker.php respectively
• if you plugin needs extra files copy them to ColorPicker folder keeping folders structure
• open EditColorPicker.js in any text editor and replace all occurences of 'EditMyField' with 'EditColorPicker'. Do the same with EditColorPicker.php file.
• use addJSFiles() function in ColorPicker.php to add refeences to external Javascript files:

PHP

$this->pageObject->AddJSFile("jquery.miniColors.min.js");

ASP

this.pageObject.AddJSFile_p1 "jquery.miniColors.min.js"

• use addCSSFiles() function to add CSS files

PHP

$this->pageObject->AddCSSFile("jquery.miniColors.css");

ASP

this.pageObject.AddCSSFile_p1 "jquery.miniColors.css"

In EditColorPicker.php file find buildUserControl() function. This is were you build HTML code for your control. If you leave predefined code as is it will display a simple text edit box. We only going add a minor change telling colorpicker control to use black color theme:

class="black"

Lets see how we can turn this edit box into a colorpicker control. According to colorpicker instructions we need to call miniColors Javascript referencing edit box. We'll do so adding the following code to constructor function:

$("#"+this.valContId).miniColors({
letterCase: 'uppercase'
});

letterCase option tells control to convert color values entered manually to upper case. this.valContId is the id of the control.

This is it, our control is ready. You can now launch PHPRunner, select ColorPicker as 'Edit as' type for any text field and enjoy your color picker on Add/Edit pages.

You may consider some additional enhancements.

1. It would be nice if instead of hex color value we can show some visual representation of selected color on List/View pages. We'll do so choosing 'View as' type 'Custom' and putting the following code there:

PHP

$value="<span style='padding: 5px; background: ".$value."'>".$value."</span>";

ASP

strValue="<span style='padding: 5px; background: " & strValue & "'>" & strValue & "</span>"

2. By default PHPRunner set focus to the first edit control when Add or Edit page is loaded. This is not a desired behaviour for colorpciker control as we do not want to see colorpicker popup window to open every time page is loaded. To prevent this from happening we'll implement setFocus function. Our job is to simply return false every time.

You you need to change control behaviour check all functions and events in source\include\common\runnerJS\Control.js file.

SignaturePad

The SignaturePad plugin allows to a add signature pad to your forms. SignaturePad works with both mouse and touch devices. We will be using SignaturePad jQuery plugin that comes with excellent documentation and examples.

The basic setup is the same: create new folder for SignaturePad plugin, copy and rename files, add files that plugin needs to plugin directory. This plugin is a bit more complicated and takes a few extra steps to integrate.

1. Build control's HTML code

Here is how we do this in buildUserControl() function:

PHP

echo '
<div class="sigPad" style="width: '.($this->width+2).'px;">
<ul class="sigNav">
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<div class="sig sigWrapper">
<div class="typed"></div>
 
<canvas class="pad" width="'.$this->width.'" height="'.$this->height.'"></canvas>
<input id="'.$this->cfield.'" type="hidden" '
.'name="'.$this->cfield.'" class="output">
</div>
</div>
 
';

ASP

dim str
str = "
<div class='sigPad' style='width: " & CStr(this.settings("width")+2) & "px;'>" & _
"
<ul class='sigNav'>" & _
"
<li class='clearButton'><a href='#clear'>Clear</a></li>
 
" & _
"</ul>
 
" & _
"
<div class='sig sigWrapper'>" & _
"
<div class='typed'></div>
 
" & _
"<canvas class='pad' width='" & this.settings("width") & "' height='" & this.settings("height") & "'></canvas>" & _
"
<input id='" & this.cfield & "' type='hidden' " & _
"name='" & this.cfield & "' class='output'>" & _
"</div>
</div>
 
"
ResponseWrite str
 

2. Convert signature data to image

Signature data is recorded in JSON format as a sequence of lines and passed to the web server this way. Now we need to convert JSON data to PNG file and save it in 'files' folder on the web server. Luckily all the hard work was already done and all we need to do is to add a few lines of code to  readWebValue() function:

PHP

if ($this->webValue) {
	// save signature to file
	require_once 'signature-to-image.php';
	$img = sigJsonToImage($this->webValue, array(
				'imageSize' => array($this->width, $this->height)
				,'bgColour' => $this->bgcolor
				));
	$filename= $this->folder."/".generatePassword(15).".png";
	imagepng($img, $filename);
	$filesize = filesize($filename);
 
	// prepare image info to be saved in db
	$result[] = array("name" => $filename,
	"usrName" => 'signature.png', "size" => $filesize, "type" => "image/png",
	"searchStr" => 'signature.png'.":sStrEnd");
	$this->webValue = my_json_encode($result);
	}

ASP

	this_object.getPostValueAndType
	if bValue(FieldSubmitted((CSmartStr(this_object.goodFieldName) & "_") & CSmartStr(this_object.id))) then
		doClassAssignment this_object,"webValue",prepare_for_db(this_object.field,this_object.webValue,this_object.webType,"","")
	else
		this_object.webValue = false
	end if
 
	if Left(this_object.webValue,Len("data:image/png;base64,"))="data:image/png;base64," then
		this_object.webValue = Mid(this_object.webValue, Len("data:image/png;base64,")+1)
	end if
 
	filename = generatePassword(15)
	var = Base64Decode(this_object.webValue)
	runner_save_file CSmartStr(getabspath(this_object.settings("folder"))) & "\" & filename & ".png" , var
 
	set result=CreateDictionary()
	set result1 = CreateDictionary()
 
	setArrElement result,"name",this_object.settings("folder") & "/" & filename & ".png"
	setArrElement result,"usrName","signature.png"
	setArrElement result,"size",LenB(var)
	setArrElement result,"type","image/png"
	setArrElement result,"searchStr","signature.png" & ":sStrEnd"
	set result1(0) = result
	this_object.webValue = my_json_encode(result1)
 
	if not (IsFalse(this_object.webValue)) then
		setArrElement avalues,this_object.field,this_object.webValue
	end if

You can read more info JSON to image conversion here.

Note the way how file info is stored in the database. Since new version offers multiple files upload we need to be able to store more info there than just file name. Besides the file name itself we also save file size, file type and path to the file in JSON format. Here is how typical file upload field looks in the database:

[{"name":"files\/h8hsoz5hd23b0ik.jpg","usrName":"Chrysanthemum.jpg","size":879394,"type":"image\/jpeg","searchStr":"Chrysanthemum.jpg:sStrEnd"},
{"name":"files\/2p85jz854o6fbv8.jpg","usrName":"Desert.jpg","size":845941,"type":"image\/jpeg","searchStr":"Desert.jpg:sStrEnd"},
{"name":"files\/pm4fu8uv2u6xc1w.jpg","usrName":"Hydrangeas.jpg","size":595284,"type":"image\/jpeg","searchStr":"Hydrangeas.jpg:sStrEnd"}]

3. Customization

Now it's the time to customize our plugin. Users may need to change the appearance and behaviour of signature pad i.e.

• change width and height of signature pad
• change background color
• change folder where image files are stored
• make signature pad field required

As a first step we need to learn to pass settings from PHPRunner wizard to plugin. Proceed to "Edit as" dialog in PHRRunner and click 'Add initialization script' button. Here is the sample set of settings of SignaturePad control:

PHP

// signature field height
$this->settings["height"] = 100;
// signature field width
$this->settings["width"] = 300;
// signature background color
$this->settings["bgcolor"] = array(0xff, 0xff, 0xff);
// set it to true to make signature field required
$this->settings["required"]=false;
// folder to store signature files
$this->settings["folder"]="files";

ASP

' signature field height
this_object.settings("height") = 100
' signature field width
this_object.settings("width") = 300
' signature background color
this_object.settings("bgcolor") = "#FFFFFF"
' set it to true to make signature field required
this_object.settings("required")=false
' folder to store signature files
this_object.settings("folder")="files"

This code is self-descriptive, you can pass any number of settings there. If you create your own edit control plugin place sample initialization script to sample.php file that needs to be located in the plugin folder.

Now we can access those settings in plugin's initUserControl() function. We can also pass settings to Javascript part of the plugin.

PHP

// setting default value
$this->required = false;
 
// saving settings to the local variable
if ($this->settings["required"])
	$this->required=$this->settings["required"];		
 
// passing settings to Javascript
$this->addJSSetting("required", $this->required);

ASP

this.addJSSetting_p2 "required", this.settings("required")

Now let's actually add some new functionality

Making signature field required

In Javascript init() function add the following code:

if (this.required)
this.addValidation("IsRequired");

Signature is not required by default. To make it required add the following line of code to initialization script under 'Edit as' properties:

PHP

$this->settings["required"]=true;

ASP

this_object.settings("required")=true

Setting width and height of signature pad

Passing width and height from 'Edit as' settings in PHPRunner:

PHP

$this->settings["height"] = 100;
$this->settings["width"] = 300;

ASP

this_object.settings("height") = 100
this_object.settings("width") = 300

Then we can use $this->width and $this->height in buildUserControl() function to specify width and height of our control:

<canvas class="pad" width="'.$this->width.'" height="'.$this->height.'"></canvas>

Changing folder where signature images stored

Passing folder name from 'Edit as' settings in PHPRunner:

PHP

$this->settings["folder"]="files";

ASP

this_object.settings("folder")="files"

Using this variable in readWebValue() function:

PHP

$filename= $this->folder."/".generatePassword(15).".png";

ASP

 
filename = generatePassword(15)
var = Base64Decode(this_object.webValue)
runner_save_file CSmartStr(getabspath(this_object.settings("folder"))) & "\" & filename & ".png" , var
 

Changing signature pad background color

Passing background color from 'Edit as' settings in PHPRunner:

PHP

$this->settings["bgcolor"] = array(0xff, 0xff, 0xff);

ASP

this_object.settings("bgcolor") = "#FFFFFF"

bgcolor array contains color value in RGB format (Red, Green, Blue, each color ranges from 0 to 255, 0xff is a hexadecimal representation of 255. array(0xff, 0xff, 0xff) means white color.

Now in Javascript control constructor function we can use this.bgColor to pass background color to SignaturePad control:

$('.sigPad').signaturePad({drawOnly:true, bgColour: this.bgColor});

We also need to pass backgound color to sigJsonToImage() function that converts JSON signature data to image. We use $this->bgcolor variable here in readWebValue() PHP function.

PHP

$img = sigJsonToImage($this->webValue, array(
		'imageSize' => array($this->width, $this->height)
		,'bgColour' => $this->bgcolor
		));

This is it. As you can creating your own edit control plugins is not a rocket science and you can build something useful in just a few lines of code.

Lets us know what kind of edit controls you want us to implement. If you have one in mind feel free to post detailed description here and provide some links to sample implementation.

Developer notes

File naming conventions

Your edit plugin might need to utilize some additional PHP, JS and CSS files. Files can be added to the main plugin folder or to subfolders like "include" or "img". Files from the main plugin directory will be copied to the output directory. Files from "include" directory will be copied to "

/include" etc. Considering the fact that your application may use multiple plugins we suggest providing unique names to helper files. For instance, if your plugin name is Slider naming CSS file slider.css is a good idea.

Inline edit considerations

To make sure edit control content is not wrapped while in inline edit mode we recommend to enclose the whole control into a <div> tag. This needs to be done in buildUserControl function in PHP or ASP code.

Access to field properties

In some situations you might need to access database field properties i.e. to find this field type. Here is PHP code that does the job:

PHP

global $strTableName;
$pSet = new ProjectSettings($strTableName);
if(IsDateFieldType($pSet->getFieldType($this->field)))
   {
      $this->webValue = "2000-01-01 ".$this->webValue;
   }

ASP

if(IsDateFieldType(this_object.pageObject.pSetEdit.getFieldType_p1(this_object.field))) then
	this_object.webValue = "2000-01-01 " & this_object.webValue
end if

Cleaning up

If your plugin creates popup you need to destroy them properly. The best option is to implement a destructor of Javascript control destroying all previously open windows. An example from BootstrapTimepicker control:

destructor: function(){
// call parent
Runner.controls.EditBootstrapTimepicker.superclass.destructor.call(this);
$("#"+this.valContId).timepicker('hideWidget');

Using z-index property

We suggest to avoid using z-index CSS property in your custom controls to minimize interference with built-in functionality like popup windows. If you absolutely must to use this property make sure the top most container of your control has z-index of 0.

New file/image upload control

For this purpose we will be using developers tools that come with Chrome browser. If you use Firefox - download and install the Firebug. Firebug is an extension to . . . → Read More: How to troubleshoot Javascript errors]]> In this article we will be focusing on debugging and troubleshooting the JavaScript errors. We will look at few examples to illustrate the methods used.

For this purpose we will be using developers tools that come with Chrome browser. If you use Firefox -
download and install the Firebug. Firebug is an extension to Mozilla Firefox web browser which allows us to monitor and debug the JavaScript in any web page.

var ctrlPrice = Runner.getControl(pageid, 'Price');
var ctrlQuantity = Runner.getControl(pageid, 'Quantity');
var ctrlTotals = Runner.getControl(pageid, 'Total');
 
function func() {
ctrlTotals.setValue(+ctrlPrice.getValue()*+ctrlQuantity.getValue());
};
 
ctrlprice.on('keyup', func);
ctrlQuantity.on('keyup', func);

Let take a look at our first example where we intentionally misspelled the name of the field used in defining the ctrlPrice variable on the JavaScript OnLoad event (ctrlPrice vs ctrlprice, case sensitive). Since this is not a syntax error the Syntax Check won't pick up on it but browser will. One thing to note here is when you are troubleshooting and you build your project, you might want to uncheck the "Compress javascript files" option on the Output step. This will organize the code in the way that is much easier to follow.

So, when the page is loaded we click F12 to display developers tools panel. We can see our error message there and by clicking error message we can get right to the line of code that causes the trouble. Error message in popup says: 'ctrlprice is not defined'. Replacing ctrlprice with correct ctrlPrice fixes the issue.

Let's take a look at another example where we are calculating amount on the fly and are not getting the anticipated result. We are calculating the order by multiplying the number of units in the order by the price of the unit and adding a tax to the equation.

var ctrlPrice = Runner.getControl(pageid, 'Price');
var ctrlQuantity = Runner.getControl(pageid, 'Quantity');
var ctrlTotals = Runner.getControl(pageid, 'Total');
 
function func() {
var total=ctrlPrice.getValue()*+ctrlQuantity.getValue();
ctrlTotals.setValue(total * total*0.1 );
};
 
ctrlprice.on('keyup', func);
ctrlQuantity.on('keyup', func);

And here is the result it produces:

So, in the order where we have 3 units at $120 each with 10% sales tax our total should be $396 dollars. However, the total we are getting is $12960. To troubleshoot the issue we will insert a breakpoint in our Javascript code and watch the values of each part of the equation separately to identify the error. To add a breakpoint we need to proceed to Scripts tab in Developers tools, find our file (pageevents_Order.js) and click the line number we we want to set our breakpoint.

Once breakpoint is inserted put cursor to Quantity field and hit any arrow key on the keyboard. Program execution stops and we can see what's going on. We can use F10 key to move to the next line of code (Step over).

Now lets add a few watch expressions on the right side. We can see that total and tax are calculated properly however we multiplying them instead of adding up which causes the error. A simple correction in the equation logic solves the issue.

Real life examples are more complicated though basic troubleshooting techniques are the same. As a first step make sure there are no runtime Javascript errors then set a breakpoint and step through the code to find logic flaws.

You can also watch a video version of this tutorial.

Here is the outline: