Oracle apex Ajax process + dy verification

at present apex Back end verification of , That is, after user input , Click submit to trigger the verification with the back-end server , To enhance the user experience , You can put this step ahead , use js Event triggers backend verification , Take monitoring whether the user name is repeated as an example .
The demo environment is apex 20.2

establish Ajax process

DECLARE
   l_count NUMBER := 0;
BEGIN
   -- Name duplicate verification 
   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(' Customer :' || :P5_1 || ' Already exists ');
      ELSE
         htp.p('success');
      END IF;
   END IF;

   -- No. repeat verification 
   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(' Saved number is :' || :P5_2|| ' The customer !');
      ELSE
         htp.p('success');
      END IF;
   END IF;

END;

First in process Directly establish proce, Then select the location ajax, Be careful pl/sql There must be a return value , hinder js You need to judge according to the return value .
Be careful ：htp.p There will be a space or tab after printing ,js When judging, you need to consider the operation of removing spaces from strings . Or print directly in this place json It's fine too （ Participate in the Corrigendum at the end of the text ）

Create dynamic operations on the corresponding form page items

js Event selection change （onchange） perhaps Lose focus （onblur）, True operation as execution js Code

apex.server.process('ajax_validate_customer_repeat',// The name here is process The name of 
    {
    
        pageItems: '#P5_PARTY_NAME'// Pay attention to take # Number 
    }
    ,
    {
    
        dataType: 'text', success: function (data) {
    
            
            if (  /*data*/ data.trim() != 'success') {
    // use htp.p There is a space after the print , I don't know why , Notice here , It can also be used. apex Packaged api Print directly 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

Follow up improvement

You can package the double check into a single 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 paragraph js Put it in page 》JavaScript 》 Function and global variable declarations Go inside .

Then on the form item to be verified senior 》 customized : οnchange=“repeat_validate(‘P5_XXX’);”

In this way, public , There is no need to define dynamic operations 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

json

No dynamic operation

Corrigendum

htp.p 、htp.print 、htp.prn The three are different ：

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 There will be one more automatically in the back /n New line
hpt.prn Not much /n

https://docs.oracle.com/database/121/ARPLS/w_htp.htm#ARPLS70586