Client-side input validation is great. It saves the round trip to the server and thus enhances the user’s experience. This weblog shows the basics of client-side input validation with HTMLB.
With HTMLB the development of new portal components for the SAP NetWeaver Portal becomes easy. HTMLB provides a rich selection of Web controls and comes in two flavours. If you prefer Java Server Pages (JSPDynPage), then you will use the HTMLB tag lib. If you favour pure Java (DynPage), then you will go with the HTMLB class lib. The most detailed information about HTMLB you will find at the websites of the SAP Design Guild. Find an extended version here. Other information sources regarding HTMLB are the SAP Library and the Javadocs.
Unfortunately, there is not much guidance on the use of HTMLB. The examples given in the SAP HTMLB Guidelines cover just the basics. If it comes to client-side input validation the documentation falls a bit short. That is quite a shame because HTMLB comes with some nice features regarding client-side input validation. Once you understood the way client-side input validation works you will use it quite a lot.
The most simple case of client-side input validation is to check whether the user has filled out a mandatory input field at all. The following example (using HTMLB Class lib) covers exactly that case: A simple HTML form containing an input field (with corresponding label) and a button to submit the form.
The following image shows the output generated by the source code above.
The little red star next to the label’s text indicates that the corresponding input field is mandatory. Use the method setRequired(boolean) of the Label class to display the red star.
If the user clicks the submit button the client-side input validation will be performed next. You have activate the client-side input validation for input fields on two levels:
- The input field level: Use the method setRequiresValidation(boolean) of the InputField class to activate client-side input validation at input field level.
- The form level: Declare the button used to submit the form as an OK button (setOKButton(boolean)) or use the method setRequiresValidation(boolean) of the Button class to activate client-side input validation at form level.
Next time the user tries to submit the form without filling the required input fields the submit process will be canceled and the user is prompted to enter a value first. Additionally, the missing field is emphasized (see image below). Note the enlarged font size of the label and the red borders of the input field.
That is about all it takes to run a simple requirement check on the client-side.