Client-side triggers for server-side validation errors
Blog by Barbara Douma
Dynamic server pages already support client-side field syntax checks, which prevent incorrect data from being submitted to the server. Uniface provides a default mechanism for reporting and displaying syntax errors in the browser, and web triggers for customizing the error reporting and display.
However, field syntax checks are just a subset of the data constraints that Uniface validates when it is instructed to reconnect, store, or validate data. Other declarative constraints as well as procedural constraints are validated on the server and, until now, there was no customized way of reporting such errors in the browser.
With Uniface 10.3.02.019, Uniface introduces support for server-side validation error reporting for fields.
- Default formatting and error reporting for fields that are in error and visible in the browser. This is the same mechanism available for client-side syntax errors: the -ufld-highlight-error- style and uflderror bound error element.
- New showError and clearError web triggers, which enable you to customize error display and reporting. These triggers are defined on fields in the component structure and they are executed in the data layer of the client. This means they can be executed for fields in error, even if the field is not in the layout, is in a hidden view, or is no longer available in the browser.
- Enhancements to the Uniface JavaScript API to make the error information accessible to JavaScript in these triggers. The new FieldErrorContext object holds information about the field that is or was in error, and provides the methods getField(), getError(), and getBoundElement(), so that you can access the field, report the error, and update DOM elements. It is the JavaScript this element in the showError and clearError
When you define a showError trigger, you need to define a corresponding clearError trigger. For example:
webtrigger showError
javascript
// this returns the FieldErrorContext object for the error
// get the field that is in error
var errorField = this.getField();
// if the field is present in the data structure ...
if (errorField) {
// style the error and add the error message as a tooltip
errorField.setProperty("style:color", "red");
errorField.setProperty("html:title", this.getError().message);
}
// Return false to suppress Uniface's default error reporting
return false;
endjavascript
end
webtrigger clearError
javascript
// this returns the FieldErrorContext object for the error
// get the field that was in error
var errorField = this.getField();
// if the field is present in the data structure...
if (errorField) {
// clear the properties that were set in showError
errorField.clearProperty("style:color");
errorField.clearProperty("html:title");
}
endjavascript
end
To see this code in action, you can download a new sample from Uniface Samples. In addition to this code, which uses Field.setProperty(), the sample demonstrates the default error display, the use of this.getBoundElement()to navigate and style other elements in the DOM, and the use of an error count and error list to display multiple errors.
For more information, consult the documentation: