Pretius APEX Client Side Validation

Oracle APEX dynamic action plugin v1.1

The plugin is dynamic action plugin to validate APEX items according to defined APEX item validations on browser side - without submitting the form.

The plugin is no longer being maintained.

License

This plugin is currently available for use in all commercial and noncommercial projects under MIT license. License has been included with this software.

Legal Disclaimer

The program(s) and/or file(s) are supplied as is. The author disclaims all warranties, expressed or implied, including, without limitation, the warranties of merchantability and of fitness for any purpose. The author takes no responsibility, assumes no liability for damages, direct or consequential, which may result from the use of these program(s) and/or file(s).

Documentation

Detailed documentation, usage guide, roadmap ang version changelog is available at Pretius GitHub repository.

Live demo

To use predefined templates the plugin attribute "Render validation result" must be set to proper value.

The example presents how "Error text only" template displays validation result. If APEX item validation fails, the validation message is displayed after label.

Example text field #1 #ERROR_MESSAGE#

[NULL value], [Invalid value], [Valid value]

SEQ	Name	Failure text	Type	Validation expression1
9	Example 1 numeric	"#LABEL#" must be numeric.	Item\Column specified is numericITEM_IS_NUMERIC	P30_RENDER_RESULT_1
10	Example 1 not null	Field "#LABEL#" must have some value.	Item\Column specified is NOT NULLITEM_NOT_NULL	P30_RENDER_RESULT_1
999999999999	ITEM_REQUIRED	item buildin validation ITEM_REQUIRED	APEX item native validationITEM_REQUIRED	P30_RENDER_RESULT_1

The example presents how "Error text and icons after field" template displays validation result.

If APEX item validation fails, the validation message is displayed after label and failure icon () is placed after text field.
If APEX item validation ends successfully the success icon () is placed after text field

Example text field #2 #ERROR_MESSAGE#

[NULL value], [Invalid value], [Valid value]

SEQ	Name	Failure text	Type	Validation expression1
20	Item not null	Field "#LABEL#" must have some value.	Item\Column specified is NOT NULLITEM_NOT_NULL	P30_RENDER_RESULT_3
30	Item without spaces	"#LABEL#" can not contain spaces.	Item\Column specified contains no spacesITEM_CONTAINS_NO_SPACES	P30_RENDER_RESULT_3

The example presents how "Error text and highlight field" template displays validation result.

If APEX item validation fails, the validation message is displayed after label and the text field is highlighted with red.
If APEX item validation ends successfully the text field is highlighted with green.

Highlights colors can be changed by overriding CSS classes "pretius_highlight_error" and "pretius_highlight_success".

Exmaple textfield #3 #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

SEQ	Name	Failure text	Type	Validation expression1
39	P30_RENDER_RESULT_4 not null	Field "#LABEL#" must have some value.	Item\Column specified is NOT NULLITEM_NOT_NULL	P30_RENDER_RESULT_4
40	Length between 5 and 19	The length of "#LABEL#" must be between 5 and 19.	PL/SQL ExpressionPLSQL_EXPRESSION	LENGTH(:P30_RENDER_RESULT_4) between 5 and 19

In this example validation result is handled by custom callback function defined with JavaScript in the plugin dynamic action.

If validation fails, the text field color text is changed to red and validation message is displayed after label.
If validation ends successfully, the text field color is changed to black (default color).

Example textfield #4 #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

var label = $('[for='+itemName+']');

triggeringElement.parent().find( errorClass ).remove();
label.parent().find( errorClass ).remove();

if ( validationResult.passed == true) {
  triggeringElement.css('color', 'black');
}
else if ( validationResult.passed == false) {
  triggeringElement.css('color', 'red');
  label.after( errorHTML );
}
else {
  null;
}

SEQ	Name	Failure text	Type	Validation expression1	Validation expression2
50	Example 4 not null	Field "#LABEL#" must have some value.	Item\Column specified is NOT NULLITEM_NOT_NULL	P30_RENDER_RESULT_2	-
60	Email address	Field #LABEL# is not a valid e-mail address.	Item\Column in Expression 1 matches Regular Expression in Expression 2REGULAR_EXPRESSION	P30_RENDER_RESULT_2	^[-!#$%&'+/0-9=?A-Z^_a-z{\|}~](\.?[-!#$%&'+/0-9=?A-Z^_a-z{\|}~])+@[a-zA-Z](-?[a-zA-Z0-9])(\.[a-zA-Z](-?[a-zA-Z0-9]))+$

In this example you can see standard user registration form. To finish registration, user has to fill e-mail address field and confirm its value in confirmation field.

The field "E-mail confirmation" depends on "E-mail" because of validation rules (value of "E-mail confirmation" must be equal to value of "E-mail"). The dependency is used by the plugin to auto-validate "E-mail confirmation" item after "E-mail" item validation ends.

E-mail #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

E-mail confirmation #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

SEQ	Type	Name	Validation expression1	Validation expression2	Failure text
1	Item\Column specified is NOT NULLITEM_NOT_NULL	E-mail not null	P30_EMAIL	-	#LABEL# must have some value.
2	Item\Column in Expression 1 matches Regular Expression in Expression 2REGULAR_EXPRESSION	E-mail valid	P30_EMAIL	^[-!#$%&'+/0-9=?A-Z^_a-z{\|}~](\.?[-!#$%&'+/0-9=?A-Z^_a-z{\|}~])@[a-zA-Z](-?[a-zA-Z0-9])(\.[a-zA-Z](-?[a-zA-Z0-9])*)+$	"#LABEL#" is not a valid e-mail.

SEQ	Type	Name	Validation expression1	Failure text
1	Function Returning BooleanFUNC_BODY_RETURNING_BOOLEAN	E-mail comparison	if :P30_EMAIL_CONFIRM = :P30_EMAIL and :P30_EMAIL_CONFIRM is not null then return true; else return false; end if;	"#LABEL#" does not match "E-mail" value.

In this example we present APEX validation defined in APEX item configuration. Validation for text field is executed after leaving the field and changing checkbox. Each APEX item displayed below has Value Required attribute set to Yes, so empty values are not allowed.

Number field #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

Datepicker #ERROR_MESSAGE#

Expected format: YYYY-MM-DD[Null value], [Invalid value], [Valid value]

Is Required #ERROR_MESSAGE#

In this section we present how to use plugin events to track (via log) validation sequence. Each event has access to JSON object that can be used to handle validation step. To get more information about plugin events, please refer to the plugin manual.

Not null #ERROR_MESSAGE#

[Null value], [Any value]

Alphanumeric #ERROR_MESSAGE#

[Null value], [Invalid value], [Valid value]

No validation defined #ERROR_MESSAGE#

[Any value]

The plugin supports four positions for displaying validation error message (After label, Before label, After item, Before item). In Oracle APEX Universal Theme default position is After item. If you want to use positions After label, Before label or Before item you have to create new label templates (check section Label templates for cheat sheet).

Examples of all configured positions are presented below. Each APEX item has proper label template (definitions in section Label templates). Validation results after submit and validation results after executing the plugin are presented at the same spot. Just test it!

#ERROR_MESSAGE# Before label

[ Valid ], [ Invalid ]

After label #ERROR_MESSAGE#

[ Valid ], [ Invalid ]

Before item

[ Valid ], [ Invalid ]

After item

[ Valid ], [ Invalid ]

Custom Label templates used in examples above are presented in sections below. All template attributes are available to edit in Shared Components > Templates > Edit Label Template > Definition section

Note that additional CSS styles is used.

CSS styles can be placed in Universal Theme page template or in page attribute "CSS > Inline".

.labelOnError > .t-Form-labelContainer > .t-Form-error,
.t-Form-labelContainer > .t-Form-error.forceDisplay {
  display: block;
}

.t-Form-labelContainer > .t-Form-error {
  display: none;
}

Shared Components > Templates > Edit Label Template > Definition

Template name: Optional - after item
Error template: <span class="t-Form-error">#ERROR_MESSAGE#</span>
Before label: <div class="t-Form-labelContainer col col-#LABEL_COLUMN_SPAN_NUMBER#"> <label for="#CURRENT_ITEM_NAME#" id="#LABEL_ID#" class="t-Form-label">
After label: </label> </div>
Before Label and Item: <div class="t-Form-fieldContainer rel-col #ITEM_CSS_CLASSES#" id="#CURRENT_ITEM_CONTAINER_ID#">
After Label and Item: </div>
On error before label: -
On error after label: -
Before item: <div class="t-Form-inputContainer col col-#ITEM_COLUMN_SPAN_NUMBER#">
After item: #ERROR_TEMPLATE##HELP_TEMPLATE#</div>

Shared Components > Templates > Edit Label Template > Definition

Template name: Optional - before item
Error template: <span class="t-Form-error">#ERROR_MESSAGE#</span>
Before label: <div class="t-Form-labelContainer col col-#LABEL_COLUMN_SPAN_NUMBER#"> <label for="#CURRENT_ITEM_NAME#" id="#LABEL_ID#" class="t-Form-label">
After label: </label> </div>
Before Label and Item: <div class="t-Form-fieldContainer rel-col #ITEM_CSS_CLASSES#" id="#CURRENT_ITEM_CONTAINER_ID#">
After Label and Item: </div>
On error before label: -
On error after label: -
Before item: <div class="t-Form-inputContainer col col-#ITEM_COLUMN_SPAN_NUMBER#"> #ERROR_TEMPLATE#
After item: #HELP_TEMPLATE#</div>

Shared Components > Templates > Edit Label Template > Definition

Template name: Optional - before label
Error template: <span class="t-Form-error">#ERROR_MESSAGE#</span>
Before label: <div class="t-Form-labelContainer col col-#LABEL_COLUMN_SPAN_NUMBER#"> <span class="t-Form-error">#ERROR_MESSAGE#</span> <label for="#CURRENT_ITEM_NAME#" id="#LABEL_ID#" class="t-Form-label">
After label: </label> </div>
Before Label and Item: <div class="t-Form-fieldContainer rel-col #ITEM_CSS_CLASSES#" id="#CURRENT_ITEM_CONTAINER_ID#">
After Label and Item: </div>
On error before label: <div class="labelOnError">
On error after label: </div>
Before item: <div class="t-Form-inputContainer col col-#ITEM_COLUMN_SPAN_NUMBER#">
After item: #HELP_TEMPLATE#</div>

Shared Components > Templates > Edit Label Template > Definition

Template name: Optional - after label
Error template: <span class="t-Form-error">#ERROR_MESSAGE#</span>
Before label: <div class="t-Form-labelContainer col col-#LABEL_COLUMN_SPAN_NUMBER#"> <label for="#CURRENT_ITEM_NAME#" id="#LABEL_ID#" class="t-Form-label">
After label: </label> <span class="t-Form-error">#ERROR_MESSAGE#</span> </div>
Before Label and Item: <div class="t-Form-fieldContainer rel-col #ITEM_CSS_CLASSES#" id="#CURRENT_ITEM_CONTAINER_ID#">
After Label and Item: </div>
On error before label: <div class="labelOnError">
On error after label: </div>
Before item: <div class="t-Form-inputContainer col col-#ITEM_COLUMN_SPAN_NUMBER#">
After item: #HELP_TEMPLATE#</div>

Download

Please click on the button below

About the author

Bartosz Ostrowski

Oracle Application Express, PL/SQL and Frontend developer. IT consultant experienced in developing database and web applications using Oracle Application Express.
Oracle APEX enthusiast, plugin developer and active community member.

@bostrowsk1
bostrowski@pretius.com
ostrowski.bartosz@gmail.com
www.ostrowskibartosz.pl

Pretius APEX Client Side Validation

Oracle APEX dynamic action plugin v1.1

License

Legal Disclaimer

Documentation

Live demo

Predefined templates

Error text only

Validations defined for item "Example text field #1"

Validations

Error text and icons after field

Validations defined for item "Example text field #2"

Validations

Error text and highlight field

Validations defined for item "Example text field #3"

Validations

Callback function

JavaScript callback function

New

Validations defined for item "Example text field #4"

Validations

Depended validations

Validations defined for field "E-mail"

Validations

Validations defined for field "E-mail confirmation"

Validations

Native validations

Events

Examples

Event logsClear logs

Placeholders

Left column

Right column

Label templates (cheat sheet)

Additional CSS

After item (label template)

Before item (label template)

Before label (label template)

After label (label template)

Download

About the author

Event logs