|
Issue 1, 2015 |
 |
Download pdf |
By Christine Zimmermann, Consultant, R&D
Karlheinz Kronauer, Senior Director, Product Management, Software AG
NaturalONE offers a comprehensive development tool set to develop Web applications using AJAX technology. The toolset is provided through the integrated Natural for AJAX developer. To achieve maximum performance when creating Web applications, it is important that you collect valid data from your end-users. Since you can never trust the user to enter correct values in the correct format, you should apply Client-Side Validation (CSV) rules to force end-users to enter valid data and so ensure a maximum of response time. Let’s explore how CSV can be applied in Natural for AJAX.
Importance of valid business data
Most applications request end-users to input data to process or store business data on the server behind the application. It is extremely important that this data is valid. For some data fields, you can prevent end-users from inserting invalid data by only allowing users to select from valid values in a corresponding selection list and using auto-complete functionality. This method is limited and not applicable to all data fields. For example, if an end-user is asked to enter his email address, it is not possible to provide a selection list. But you can tell if it is a valid email address format based on the characters entered.
With browser-based applications like Natural for AJAX, you don’t want to do all your data validations on the server as this would require a round-trip to the server whenever you want to validate a changed field. Also you often want to validate data immediately after the end-user has changed a field and don’t want to wait until the end-user has completed the entire form. For performance reasons, it is extremely important that these validations are done on the client. This is where CSV becomes an important tool in the data validation process.
CSV for input controls
You typically don’t need to validate data when input controls like check boxes or selection boxes are used because the end-user can only select among valid values. Data validation is usually required in controls where the end-user can type in text. Natural for AJAX applications usually use the different variations of the FIELD control. We distinguish validations between the following categories:
- Validation when leaving a single FIELD
- Validation on form submit
Validation when leaving a single FIELD
Different applications and different end-users require different methods of validation. Natural for AJAX supports the validation methods described below. When a field contains a wrong value, it is error marked when leaving the field. Figure 1 shows an example where the value 500 is not a valid input.
Figure 1: Example of error message when leaving a FIELD
Custom user hints can be shown as a tooltip. Custom error messages can also be shown in a message box or in the status bar as shown in Figure 2.
Figure 2: Custom error message displayed in status bar
Validation of FIELD data types
You can specify the required type of data – like date, datetime - in the property datatype in FIELD controls. You can also choose among different date formats to validate date fields as shown in Figure 3.
Figure 3: Specify date formats for date validation
Natural Edit Masks
Many Natural for AJAX applications are Natural applications in which the original Natural user interface has been converted into a browser-based user interface. Natural user interfaces provide powerful edit mask support. Since many end-users are accustom to it, FIELD controls in Natural for AJAX also provide the major edit mask support known from Natural user interfaces. Edit masks are a combination of validation and formatting. An edit mask can be defined in the property editmask of the FIELD control. Figure 4 shows an example definition in Layout Painter.
Rendering of value 98.5 at run-time:
Figure 4: Natural edit mask example in Layout Painter
Regular Expressions
Many programming languages support regular expressions. A regular expression is a good way to validate if the input can be a valid email address. A regular expression can be defined in the property validation of the FIELD control. Here is an example of a regular expression for email addresses:
validation="[a-zA-Z0-9_.-]{1,}\\@[a-zA-Z0-9_.-]{1,}\\.\\w{2,}"
Validation Rules
Regular expressions are very powerful but also not easy to write. Sometimes you would like to add simple validations to a FIELD like “value must not equal 500” or “value must be specified”. These simple validations are supported by a Validation Rules Editor tool.
While editing your layout in Layout Painter you can add validation rules for a selected FIELD control via the submenu “Insert/Edit Validation Rules” in the “AJAX Developer” menu. When activating this submenu, the Validation Rules Editor tool will open as shown in Figure 5.
Figure 5: Validation rules editor tool
Validation on form submit
With single FIELDs, it is convenient for the end-user to validate the FIELD immediately after the change. Sometimes you have dependencies between fields like “either field1 or field2 must have a value”. This kind of validation cannot be done when leaving a single field. It must be done when the end-user explicitly tells that application that he is finished with all input, for example via clicking a button. We call this button click “submit the data of the form”.
The Validation Rules Editor tool applies advanced validation rules that involve multiple fields as shown in Figure 6. The rules are executed on the client before the next server round-trip is triggered. When a validation error is found, no server round-trip is done and the first invalid field is error marked.
Figure 6: Advanced validation rules involve multiple fields
Conclusion
We recommend that you use CSV to force end-users to enter valid data. While this does not replace final validation of your business data on the server for optimum security, it does save execution time and improves the user experience. You can choose among many different validations supported in Natural for AJAX to meet your application needs.
Learn more, visit NaturalONE Tech Community