Xpages Lab 04 Data Validations

Domino's XPages Workshop

Lab Manual

Lab 4

Advanced Concepts – Client & Server Validations

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 4 IBM ISV & DEVELOPER RELATIONS.

Page 1 of 14

Introduction:Yesterday, you learned how to create a new XPages application from scratch. Learning about a lot of the different XPage components, as well as how to incorporate standard Notes Documents like Forms and Views into the XPages. Today, you will learn about some of the “advanced concepts” behind XPages. This lab will explore the different modes of data validation and use server side validation and the error display components. You will become familiar with XPages' error handling concepts and capabilities.

Description:In this lab, you will create in your Scrapbook database a new page to explore the 2 server side error handling controls and their use. This exercise doesn't constitute a part of our Profiles sample application. Then you will create 2 JavaScript Libraries with sample code (provided). One client JavaScript, One server JavaScript. Link them into your sample validation page. Lastly, you will add 3 fields to your test form: eMail, test1,test2. Validate the eMail field to have a valid formed eMail address using a regular expression. Validate that the test2 field has the same content as test1 field using JavaScript.

Objective:At the end of the lab, you should be able to:

• Know about the different modes of data validation within XPages

• Know how to use server side validation and about the error display components

• Understand how to implement client side JavaScript validation

• Create expression based custom validations for usage within forms

Procedure:

SECTION 1: EXPLORE SERVER SIDE ERROR HANDLING

In this section, you will learn how to create in your Scrapbook database a new page to explore the 2 server side error handling controls and their use. This exercise doesn't constitute a part of the Profiles sample application.

Step 1 Open the xScrapbook database and create a New XPage called validationTest.


Page 2 of 14

Step 2 Add 5 fields:

- Name (edit box)- TagLine (edit box)- Color (drop down list/combo box with red, yellow, green)- myCheckbox (a checkbox)- itemCount (edit box)

Step 3 Make the Name field a Required field and add an error message.

Step 4 Give the TagLine field a minimum length of 4 and a maximum of 40, create an error message.


Page 3 of 14

Step 5 Make the itemCount a numeric display type (in Data tab of properties).

Step 6 And check out the data > Converter xp:convertNumber (in All Properties).

Step 7 Preview the results in the browser – we will introduce server side validation there.

Step 8 Add a Display Error control next to the Name control. Set its Show error messages for property to Name.


Page 4 of 14

Step 9 Select the Name control and in All Properties > data section, set disable clientSideValidation to true.

Step 10 Add a Submit button and then test it in the browser. Leave the name field blank, and only put 3 characters in the tag line box, as well as alphabetic characters into itemCount box. You should be able to see each of the error messages.

Step 11 Add a Display Errors control into some space between the fields and the submit button.

Step 12 Set the disableClientSideValidation on the TagLine control to true.


Page 5 of 14

Step 13 Preview in both the Browser and the Notes Client. Make sure to test the error messages by not filling in form correctly. Check the results.

Things to Explore: 1) Use a Script library for validation

2) When would you use client side and when server side validation?


Page 6 of 14

SECTION 2: UTILIZE SERVER AND CLIENT SIDE JAVASCRIPT FOR VALIDATION

In this section, you will learn how to use server and client side JavaScript libraries for validation (or other purposes). Create 2 JavaScript Libraries with sample code (provided). One client JavaScript, One server JavaScript. Link them into your sample plage.

Step 1 In Designer, expand Code in the Navigator View and double-click on Script Libraries to give it focus.

Step 2 Create a New Script Library and name it ClientSideValidation, and give it a Type of JavaScript.


Page 7 of 14

Step 3 Paste the following code into the library (it can be found in the script.snippets.txt file within the C:\Lab Files\codeSnippets folder):

function checkSearchField(element, length, message){ if(null != element){ if(element.value == ""){ alert(message); element.focus(); return false; } if(element.value.length < length){ alert( "Please enter a value of at least " + length + " characters." ); element.select(); return false; } return true; }}

Step 4 On the validationTest page click the Resources panel from within Properties and choose Add Script library and add the ClientSideValidation library.

Step 5 Select the submit button and select the onClick event, client side! Add the following code:

var element = dojo.byId("#{id:TagLine}");checkSearchField(element, 4, "We need a tag line");


Page 8 of 14

Step 6 Add a New Script Library with the name of ServerSideValidation and Type of Server JavaScript.

Step 7 Add the following code:

function requiredFieldCheck(editBoxComponent, labelComponent, requiredMessage){ var value = editBoxComponent.getValue(); if(null == value || value == ""){ labelComponent.setValue(requiredMessage); return false; } return true;}

Step 8 Add the server side script library to the validationTest XPage.

Step 9 Add a new Label behind the TagLine edit control and call it TagLabel. Make sure the Label itself blank.

Step 10 Add a simple action group with the following JavaScript to the submit button, note that this will be on the Server side for the onclick event:

requiredFieldCheck( getComponent("TagLine"), getComponent("TagLabel"), "Please provide a tag line!");


Page 9 of 14

Step 11 Save the changes to the validationTest XPage.

Step 12 Preview in both the Browser and the Notes Client. Be sure to test out all the validation rules you've created.

Things to Explore: 1) What alternatives to alert boxes can you use?

SECTION 3: EXPRESSION VALIDATIONS WITHIN FORMS

In this section, you will learn how to use a custom validator using a regular expression and another one using your own JavaScript code. Add 3 fields to your test form: eMail, test1,test2. Validate the eMail field to have a valid formed eMail address using a regular expression. Validate that the test2 field has the same content as test1 field using JavaScript.

Step 1 Add 3 Edit Box fields to the validationTest XPage:- eMail- test1- test2

Step 2 Add in Label controls for each.


Page 10 of 14

Step 3 Click on the eMail field and switch to the All Properties panel and expand data then select validators.

Step 4 Click on add validator button, and select xp:validateConstraint from the list.

Step 5 Enter a message and use the following regular expression:

[\w-]+@([\w-]+\.)+[\w-]+


Page 11 of 14

Step 6 Preview the result in the browser, testing functionality.

Step 7 Add a validation to the field test2 to make sure that test1 and test2 have the same value. Use a validators > xp:validateExpression and add the following expression and message (important: Expression, not clientScript):

var v1 = getComponent("test1").getValue();var v2 = this.getSubmittedValue();return v1==v2


Page 12 of 14

Step 8 Preview the result in both the Browser and Notes Client, testing functionality.


Page 13 of 14

Things to Explore: 1) How to validate a URL to be a possible www URL

2) Use functions from a JavaScript library for validations.

Further Readings:

http://www.regular-expressions.info/javascript.html

http://regexlib.com/

http://regexpal.com/

Summary:

Congratulations! You have completed this fourth lab of the XPages workshop.

In this lab, you completed the following procedures:

• Explored server side error handling

• Utlized JavaScript for both client and server side validations

• Created expression validations for use inside of forms


Page 14 of 14

http://www.regular-expressions.info/javascript.html

http://regexpal.com/

http://regexlib.com/

Xpages Lab 04 Data Validations

Documents

profiles sample application

server side validation

error messages

tag line

validationtest xpage

client side

edit box

submit button