At present, the back-end verification of apex, that is, after the user enters, click submit to trigger the verification with the back-end server. In order to improve the user experience, this step can be pre-empted, and the js event can be used to trigger the back-end verification to monitor the user name. Is it repeated as an example.
The demo environment is apex 20.2
Create an Ajax process
DECLARE
l_count NUMBER := 0;
BEGIN
--名称重复校验
IF :P5_1 IS NOT NULL THEN
SELECT COUNT(1)
INTO l_count
FROM 666 v
WHERE v.1 = :P5_1
AND ROWNUM = 1;
IF l_count > 0 THEN
htp.p('客户:' || :P5_1 || '已存在');
ELSE
htp.p('success');
END IF;
END IF;
--号重复校验
IF :P5_2 IS NOT NULL THEN
SELECT COUNT(1)
INTO l_count
FROM 666 v
WHERE v.2 = :P5_2
AND ROWNUM = 1;
IF l_count > 0 THEN
htp.p('已存号为:' || :P5_2|| '的客户!');
ELSE
htp.p('success');
END IF;
END IF;
END;
First create a process directly in the process, and then select ajax as the location. Note that the pl/sql must have a return value, and the subsequent js needs to be judged according to the return value.
Note: There will be a space or a tab after the print of htp.p, js needs to consider the string de-space operation when judging. Or you can print json directly in this place (attend the errata at the end of the article)
Create a dynamic action on the corresponding form page item
js event selection change (onchange) or loss of focus (onblur), the real operation is to execute js code
apex.server.process('ajax_validate_customer_repeat',//这儿的名称为process的名称
{
pageItems: '#P5_PARTY_NAME'//注意带#号
}
,
{
dataType: 'text', success: function (data) {
if ( /*data*/ data.trim() != 'success') {
//用htp.p打印的后面带一个空格,不知道为啥,此处要注意,也可以用apex封装的api直接打印json
apex.message.clearErrors();
apex.message.showErrors([
{
type: "error",
location: ["page", "inline"],
pageItem: "P5_PARTY_NAME",
message: data,
unsafe: false
}/*,
{
type: "error",
location: "page",
message: data,
unsafe: false
}*/
]);
}
else
{
apex.message.clearErrors();
}
}
}
)
The effect is as follows
Subsequent improvement
The repeated verification can be packaged separately into a js function
function repeat_validate(page_item_name) {
apex.server.process('ajax_validate_customer_repeat',
{
pageItems: "#" + page_item_name
}
,
{
dataType: 'text', success: function (data) {
if ( /*data*/ data.trim() != 'success') {
apex.message.clearErrors();
apex.message.showErrors([
{
type: "error",
location: ["page", "inline"],
pageItem: page_item_name,
message: data,
unsafe: false
}
]);
}
else {
apex.message.clearErrors();
}
}
}
)
}
Put the above js into the page "JavaScript" function and global variable declaration.
Then on the form item to be validated "Advanced" customization: οnchange="repeat_validate('P5_XXX');"
In this way, common use is realized, and no dynamic operations need to be defined on this page item.
Reference documents:
https://apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/3341/index-en.html
https://www.foxinfotech.in/2020/04/oracle-apex-validation-without-submit-using-javascript-and-ajax-callback.html
Implemented without dynamic operations
Errata
There are differences between htp.p, htp.print, and htp.prn:
HTP.p is a shortcut (undocumented) to htp.print. HTP. Print adds a new line to the output.
HTP. PRN does not add a line break.
htp.p and htp.print will automatically have one more /n in the back,
hpt.prn will not have more /n
https://docs.oracle.com/database/121/ARPLS/w_htp.htm#ARPLS70586