• Only validate edited fields
• Only validate fields whose values were changed
• Submit dialog if has client-side validation errors
• Error style
• Classname - field with error
• Classname - error message
• Classname - field with error when hovering over error message
• Classname - error message (on hover over error message)
• Error icon
• Show warning when saving UX if using non-recommended error style
• Placeholder for UX Component validation error messages
• Show UX Component validation errors in popup-window
• Error messages popup-window title
• Error messages popup-window style
• Show message on UX component if it has field validation errors
• Javascript function to call if any field has validation errors
• Global errors DIV style

Show UX Component validation errors in popup-window

Description

If a UX component validation error occurs, specify if the error should be shown in a popup-window. Note that UX component validation errors are distinct from field validation errors. UX component validation errors are defined in the 'DialogValidate' server-side event.

Define Component Level Validation

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the control the name and label 'number'.

   

2. Open the 'Defined Controls' menu. Click on the [Submit-Reset] to add Submit and Reset button to the component. These will help submit entered data to the server to be validated on the server.

   

3. In the Events section of the main menu open the 'Server-side' events page. In the list on Server-Side Events highlight the 'dialogValidate' event.

   

4. Add the following code to the dialogValidate function's definition.

   function dialogValidate as p (e as p)
   	
   dialogValidate.hasError = .f.
   dialogValidate.errorText = ""
   
   if .not.(e.dataSubmitted.number = "42") then 
   	dialogValidate.hasError = .t.
   	 dialogValidate.errorText = "This is not the correct number"
   end if
   
   end function

   

5. Open the UX Properties page. In the 'Validation and Error Reporting' section check the 'Show UX Component validation errors in popup -window' property checkbox.

   

6. Run the component in Live Preview. Enter any number into the textbox except '42' and you should see a popup window display the validation error message that you defined in the dialogValidate function definition.

   

Sending a Confirmation Message after an Entry is Validated

1. In the Events section of the main menu open the 'Server-side' page and highlight the afterDialogValidate event. Define the afterDialogValidate function.

   function afterDialogValidate as v (e as p)
   	e.javascript = "alert('This is the correct number');"
   end function

   

2. Run the component in Live Preview. Enter 42 into the number textbox. You should see the alert box that you defined fire.