Skip to Content

Client-side Input Validation with HTMLB – Intermediate

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

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



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.



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).

1 Comment
You must be Logged on to comment or reply to a post.