Client-side Input Validation with HTMLB - Intermediate

[Former Member]

Client-side input validation is great. It saves the round trip to the server and thus enhances the user's experience. This weblog bases on my last blog (Client-side Input Validation with HTMLB - The Basics and introduces the HTMLB standard validators that can be used out-of-the-box for client-side input validation.

The Standard Validators

Last time I wrote about the most simple case of client-side input validation. I explained how to perfom a simple client-side requirement check with the means of HTMLB. Though I did not mention it explicitly, I already made use of one of the standard validators. I used the default validator (RequirementValidator) from the Java package com.sapportals.htmlb.validation (Javadocs). This package contains quite a few ready-to-use validators (see Figure 1).

Figure 1) HTMLB Standard Validators

Basically, there are 8 standard validators which provide you with a wide range of possibilities in terms of client-side input validation.

• If you use the CancelButtonValidator and the user clicks the Cancel button after entering a value, then a small dialog will pop up asking the user to confirm his intentions to discard the entered values.
• The DateValidator can be used to limit an input field to date values only.
• The FloatValidator checks whether the user entered a number.
• The IntegerValidator checks for integer values.
• The LengthValidator can be used to check the length (specific value or interval) of the user's input.
• The RequiredValidator merely checks whether the user entered a value at all.
• The StringValidator is a very powerful validator. It can be used to check whether the input matches a given string pattern.
• The TimeValidator can be used to limit an input field to time values only.

How To Use The Standard Validators

The following example shows how to check the user's input for a given pattern. In our case the user is supposed to enter a German phone number. The international country code for Germany is +49. That means we are looking for a numercial string that starts with +49. In the example the check is perfomed by a StringValidator. By default StringValidators accept all kind of strings. To limit the number of accepted values to German phone numbers we have to do modify the underlying data type. Therefor we use the method setPatttern(String) of the DataString class (the underlying data type of StringValidators). The JavaScript pattern (regular expression) for German phone numbers is "\+49 [0-9]*" (Find an excellent article on regular expressions in JavaScript here).

Code Example

package de.sdm.kellermann;import com.sapportals.htmlb.Button;import com.sapportals.htmlb.Form;import com.sapportals.htmlb.FormLayout;import com.sapportals.htmlb.InputField;import com.sapportals.htmlb.Label;import com.sapportals.htmlb.enum.DataType;import com.sapportals.htmlb.page.DynPage;import com.sapportals.htmlb.page.PageException;import com.sapportals.htmlb.type.DataString;import com.sapportals.htmlb.validation.StringValidator;import com.sapportals.portal.htmlb.page.PageProcessorComponent;public class HtmlbClasslibExample extends PageProcessorComponent { public DynPage getPage() {  return new HtmlbClasslibExampleDynPage(); } public static class HtmlbClasslibExampleDynPage extends DynPage {  public void doInitialization() {  }  public void doProcessAfterInput() throws PageException {  }  public void doProcessBeforeOutput() throws PageException {        //create validator   StringValidator validator = new StringValidator();   DataString validatorDataType = new DataString();   validatorDataType.setPattern("\+49 [0-9]*");   validator.setValue(validatorDataType);            //create input field        InputField inputField = new InputField("inputField");   inputField.setRequired(true);   inputField.setType(DataType.STRING);   inputField.setRequiresValidation(true);   inputField.setValidator(validator);      //create label for input field   Label label = new Label("label");   label.setText("Value");   label.setLabelFor(inputField);   label.setRequired(true);      //create button to submit form   Button submitBtn = new Button("submitBtn");   submitBtn.setText("Submit");   submitBtn.setOKButton(true);   //create layout to arrange ui components   FormLayout globalLayout = new FormLayout();   globalLayout.setMargin("10px", "10px", "10px", "10px");   globalLayout.addComponent(2, 1, label);   globalLayout.addComponent(2, 2, inputField);   globalLayout.addComponent(3, 1, submitBtn);        //add layout to form   Form form = this.getForm();    form.addComponent(globalLayout);        } }}

The given code example creates a simple HTML form containing an input field (with corresponding label) and a button to submit the form.

Screenshot

Next time the user tries to submit the form without entering a German phone number the submit process will be canceled and the user is prompted to enter a valid value.

Screenshot

Hint: If you do not like the rather cryptic error message you can simply create your own validator class extending the class StringValidator and overwrite the method getErrorMessage(Locale).