The Lollygag framework enables you to setup form validation once on the server-side within
the DataServices.config file. When
a form is created on the client-side, the validators are retrieved from the server through
an Ajax call.
The advantage of this approach is that you are not required to perform the same validation
on both the server and the client. You only need to do everything once. This approach makes
your Ajax application more secure.
The Lollygag framework supports the following types of validators:
-
validateRequired
Enables you to validate whether a value has been entered into a form field.
-
validateExpression
Enables you to validate a form field against a regular expression.
-
validateCompare
Enables you to compare the value of one form field against another.
-
validateCustom
Enables you to perform custom validation.
The following DataServices.config file illustrates how you can make form fields required.
Notice that validateRequired tags are associated with both the name and comment fields.
DataServices.config
<?xml version="1.0" encoding="utf-8" ?>
<dataServices
xmlns="http://lollygagframework.com/dataservices"
defaultConnectionStringName="conGuestbook">
<dataService id="svcGuestbook">
<sqlCommand
allowAnonymous="true"
type="select"
sql="SELECT TOP 10 name, comment FROM Guestbook ORDER BY id DESC" />
<sqlCommand
allowAnonymous="true"
type="insert"
sql="INSERT Guestbook (name, comment) VALUES (@name, @comment)">
<parameters>
<parameter name="name">
<validators>
<validateRequired inlineErrorMessage="Required!" summaryErrorMessage="Name is required!"/>
</validators>
</parameter>
<parameter name="comment">
<validators>
<validateRequired inlineErrorMessage="Required!" summaryErrorMessage="Comment is required!"/>
</validators>
</parameter>
</parameters>
</sqlCommand>
</dataService>
</dataServices>
The following page includes an insertform widget. This widget automatically retrieves the
validators defined in the DataServices.config file and displays validation error messages
on the client. If you don't enter a name or comment, an error message is displayed.
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="/lollygag/lollygagframework/0_1/lollygag.xsl"?>
<lolly:application
title="Guestbook"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:data="http://lollygagframework.com/data"
xmlns:lolly="http://lollygagframework.com/core">
<data:insertform dataSourceId="srcGuestbook">
<label for="txtTitle">Your Name:</label>
<br />
<lolly:textbox id="txtTitle" fieldName="name" />
<br />
<br />
<label for="txtComment">Comment:</label>
<br />
<lolly:textarea id="txtComment" fieldName="comment" />
<br />
<br />
<lolly:button label="Add Comment" command="insert" />
</data:insertform>
<hr />
<data:dataview dataSourceId="srcGuestbook">
<data:template>
<h1>{{name}}</h1>
{{htmlEncode(comment)}}
</data:template>
</data:dataview>
<data:datasource id="srcGuestbook" dataServiceId="svcGuestbook" />
</lolly:application>
Custom Validation
If none of the standard validators provide the validation that you need, you have the
option of writing a custom validator. You write the custom validator on the server, and the
custom validator is called from the client.
For example, the following DataServices.config file includes a custom validator
for the name field.
DataServices.config
<?xml version="1.0" encoding="utf-8" ?>
<dataServices
xmlns="http://lollygagframework.com/dataservices"
defaultConnectionStringName="conGuestbook">
<dataService id="svcGuestbook">
<sqlCommand
allowAnonymous="true"
type="select"
sql="SELECT TOP 10 name, comment FROM Guestbook ORDER BY id DESC" />
<sqlCommand
allowAnonymous="true"
type="insert"
sql="INSERT Guestbook (name, comment) VALUES (@name, @comment)">
<parameters>
<parameter name="name">
<validators>
<validateRequired inlineErrorMessage="Required!" summaryErrorMessage="Name is required!"/>
<validateCustom
objectName="MyValidators"
methodName="validateLength"
inlineErrorMessage="Too long!"
summaryErrorMessage="Name is too long!"/>
</validators>
</parameter>
<parameter name="comment">
<validators>
<validateRequired inlineErrorMessage="Required!" summaryErrorMessage="Comment is required!"/>
</validators>
</parameter>
</parameters>
</sqlCommand>
</dataService>
</dataServices>
Notice that the name field contains a validateCustom tag. This tag has attributes that
represent an object name and object method name. The method is automatically called from
the client when the user enters data into the name form field (the method is called on the
blur event).
The validateCustom tag refers to the following C# class named MyValidators.
MyValidators.cs
using System;
public class MyValidators
{
public static bool validateLength(string value, Validator validator)
{
if (String.IsNullOrEmpty(value))
return true;
if (value.Length < 10)
return true;
return false;
}
}
You can try out the custom validator by entering a name longer than 10 characters into
the name form field. Every time you modify the data in the name form field, the custom
validator is called on the server.
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="/lollygag/lollygagframework/0_1/lollygag.xsl"?>
<lolly:application
title="Guestbook"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:data="http://lollygagframework.com/data"
xmlns:lolly="http://lollygagframework.com/core">
<data:insertform dataSourceId="srcGuestbook">
<label for="txtTitle">Your Name:</label>
<br />
<lolly:textbox id="txtTitle" fieldName="name" />
<br />
<br />
<label for="txtComment">Comment:</label>
<br />
<lolly:textarea id="txtComment" fieldName="comment" />
<br />
<br />
<lolly:button label="Add Comment" command="insert" />
</data:insertform>
<hr />
<data:dataview dataSourceId="srcGuestbook">
<data:template>
<h1>{{name}}</h1>
{{htmlEncode(comment)}}
</data:template>
</data:dataview>
<data:datasource id="srcGuestbook" dataServiceId="svcGuestbook" />
</lolly:application>
