Monday, 14 January 2019

JET - programmatic UI validation

JET: 6.0.0, 3.2.0
Source: GitHub

The following article shows how to programmatically validate a set of JET UI components. For backward compatibility, the application has been extended to support the new JET 6.0.0 web components, as well as the older (on or before 3.2.0) html components.

The sample application consists of two forms, each of which has been built on a template supplied from the JS file. The validators and the button click functions have all been built through the underlying data structure.



The old style JET components are the ones using the html tags.

The modern web component structure is shown below:

The validation of the new web components is quite simple enough, as the custom components provide us with methods to validate them. The jQuery handle of these components has a tag name starting with OJ-. The validate and the showMessages methods have been used to check the components.


But for older JET components which made use of html tags, the validation is a bit different. The jQuery handlers provide us with methods with same names as the ojComponent type, and these methods perform the validation similar to above. Note the ojInputText("showMessages") and ojInputText("validate") methods below. Similar methods can be found for ojInputDate and other components.

Below example illustrates ojInputText and ojInputDate components.


The best way to find out about all the methods supported by a component is to list out the .__proto__ for the jQuery handle, or checking the JSDoc for the required component.

Validation has certainly become simpler with CCA components, but backward compatibility is also important!

Cheers!

No comments:

Post a Comment