Oracle Apex Validation Without Submit Using JavaScript and Ajax Callback

Oracle Apex Validation Without Submit Using JavaScript and Ajax Callback

In my previous tutorial, I have given an example to validate a page item using the PL/SQL function returning error text. Which executes on page submit, but if you want to warn the user for an error without the page submit, then you can use the Ajax Callback process and call it using the JavaScript. Below is an example:

Create an Ajax Callback Process on the Page

To do this, I have created an Ajax Callback process validate_rollno_ajx on that page with the same code I have written for the validation on item p11_roll_no. But with a minor change, I have replaced the return command with the htp.prn and added an extra else condition to return the string 'SUCCESS'.

Begin
    If substr(:p11_roll_no, 1, 1) != 'S' Then
        htp.prn('Roll number must start with S.');
    Elsif length(:p11_roll_no) < 7 Then
        htp.prn('Roll number must be 7 character long.');
    Else
        htp.prn('SUCCESS');
    End If;
End;

The following is the screenshot for your reference:

Ajax Callback process settings.

Create a Dynamic Action to Execute JavaScript Code

Then I have created a dynamic action on the item p11_roll_no on the event Lost Focus to execute the JavaScript code to call the above Ajax Callback process validate_rollno_ajx. Below is the example:

apex.server.process('validate_rollno_ajx',
{
   pageItems : '#P11_ROLL_NO'
}
,
{
   dataType : 'text', success : function(data)
   {
      if(data != 'SUCCESS') apex.message.alert(data);
   }
}
)

The following is the screenshot for the above settings:

Dynamic action execute JavaScript Code settings.

Now whenever the user will navigate through the page item p11_roll_no, it will execute the above JavaScript code and will show the alert message if the roll number is not valid as per the conditions applied in the Ajax Callback process.

Oracle Apex: calling Ajax Callback process using JavaScript.

This Post Has 24 Comments

  1. MAHENDRA

    on Invalid data entry, after displaying error message cursor return to next item.
    Cursor shuold be on Invalid Page item not goto Next Item.

    1. Vinish Kapoor

      Create a JavaScript function in the Function and global variable declare section for the page. Fox example:

      function showError(pData) {
          apex.message.alert(pData);
          apex.item( "P1_YOURITEM" ).setFocus();
      }
      

      Change the Ajax code line as following:

      if(data != 'SUCCESS') showError(data);
      

      Let me know if still any issues.

    2. MAHENDRA

      First I tried below line in EXECUTE JAVASCRIPT CODE

      srno 1-->  if(data != 'SUCCESS') apex.message.alert(data);
      this working FINE
      
      but when added below line in
      Function and global variable for page.
      
      function showError(pData) {
          apex.message.alert(pData);
          apex.item( "P49_DEPTNAME" ).setFocus();
      }
      and
      srno 1 line replaced with below line
      
      if(data != 'SUCCESS') showError(data);
      no error message display and cursor not return to p49_deptname
      Thanks
      Mahendra
      
    3. Vinish Kapoor

      You no need to add anything in the Execute JavaScript code section.

      You have created the function in the function area that is perfect.

      Now you just need to change the following line in the Ajax code:

      if(data != 'SUCCESS') showError(data);
      
    4. MAHENDRA

      I TRIED WHAT YOU ASKED TO DO IT BUT PAGE GOING HANGED AFTER DISPLAYED ERROR MESSAGE

    5. Vinish Kapoor

      I suggested you another method which is mentioned in the below comment. Use this approach.

    6. Vinish Kapoor

      Hi Mahendra,

      I found the solution and tested. Follow these steps:

      Create the below function in the Function and Global variable declare section:

      function showError(pdata) {
        apex.item('P49_DEPTNAME').setFocus();
       
        apex.message.clearErrors();
      
      apex.message.showErrors([
        {
          type:    "error",
          location:  [ "page", "inline" ],
          pageItem:  "P49_DEPTNAME",
          message:  pdata,
          unsafe:   false
        },
        {
          type:    "error",
          location:  "page",
          message:  "An error has occured.",
          unsafe:   false
        }
      ]);
      }
      

      And now change the Ajax process code as following:

      apex.server.process('validate_rollno_ajx',
      {
        pageItems : '#P49_DEPTNAME'
      }
      ,
      {
        dataType : 'text', success : function(data)
        {
         if(data != 'SUCCESS') showError(data);
        }
      }
      )
      

      This will surely work.

  2. MAHENDRA
    HI VINISH
    
    Thanks for valuable reply and that ok but
    
    when I entered Invalid entry that time I got error message 
    1) at screen top right 
          2 errors have occured 
             a) Invalid Country  -- I am validing on COUNTRY
             b) an error has occured
    2) inline error -- invalid country
    
    when I entered valid entry cursor moved to next page item but Error message
    not disappeared from sreen.
    
    so I used 
    
         apex.message.clearErrors();
    
    in Execute Javascript code at top of your code
    
    Now working Fine.
    
    Thanks
    
    Mahendra
    
       
    
    1. Vinish Kapoor

      Glad that your issue finally resolved. And yes you are right I missed that line here. In my recent blog post at orclqa.com I gave another example of it in that I used it.

  3. WDNV

    Excelent post.
    I replaced the LOST FOCUS DA with a button and it worked perfect with static text, but for some reason the AJAX CALLBACK process is not getting any values from the from, I mean :PXX_ITEM_NAME is allways null for any item.
    Any idea how to send values to the callback?

    1. Vinish Kapoor

      You can pass the page items to the callback as static ids using the hash, for example: #PXX_ITEM_NAME.

      This works totally fine, I have given the example above already:

      apex.server.process('validate_rollno_ajx',
      {
        pageItems : '#P11_ROLL_NO'
      }
      

      If multiple items then

      apex.server.process('validate_rollno_ajx',
      {
        pageItems : '#P11_ROLL_NO,#P11_STUDENT_ID'
      }
      
    2. WDNV

      Excelent!!!!!
      Thank you so much.

  4. VARSHA

    Hi Vinish

    I tried this with IG column, it is displaying the error message but getting the below error

    ERR-1002 Unable to find item ID for item "BRANCH" in application "109".
    

    Code used for Process

    Ajax callback process

    Begin
      If : BRANCH IS NULL Then
        htp.prn('Branch is mandatory');
    Else
        htp.prn('SUCCESS');
      End If;
    End;

    Execute Javascript code

    apex.server.process('validate_branch_ajx',
    {
      pageItems : '#BRANCH'
    }
    ,
    {
      dataType : 'text', success : function(data)
      {
       if(data != 'SUCCESS') apex.message.alert(data);
      }
    }
    )

    What could be the mistake?

    Thanks in advance

    1. Vinish Kapoor

      It will not get the grid column value. You will have to create a hidden page item for example p1_branch. Then create one more true action to set the IG column value to this page item. Then in the next true action call the ajax process.

      Also, change the plsql process code to refer to that hidden page item instead of :BRANCH.

    2. VARSHA

      I tried with below code, but is displaying alert msg when i try to select first column in IG and on Lose Focus column BRANCH , Branch is 3rd column in IG
      What could be the mistake?

      Dynamic Action on "Lose Focus" column :BRANCH

      First true action
      set value TO PAGE ITEM using PL/Sql expression

      Second true action JavaScript code

      apex.server.process('validate_branch_ajx',
      {
        pageItems : '#P16_BRANCH'
      }
      ,
      {
        dataType : 'text', success : function(data)
        {
         if(data != 'SUCCESS') apex.message.alert(data);
        }
      }
      )

      Ajax callback process

      Begin
        If :P16_BRANCH IS NULL Then
          htp.prn('Branch is mandatory');
      Else
          htp.prn('SUCCESS');
        End If;
      End;

    3. Vinish Kapoor

      You mean displaying error Branch is mandatory? then it means the p16_branch item has no value. Check your first true action.

    4. VARSHA

      The error message should display after Lose Focus of BRANCH column right But it is displaying when i try to select first column value, here BRANCH is third column

    5. VARSHA

      I tried this process for two page items called 'SUPPLIER' and 'SUPPLIER_INV_NO' placed one next to another. when SUPPLIER item lose focus, message is displaying for both Items.
      I have given separate process for both items but still it is displaying message for SUPPLIER_INV_NO before lose focus.

      what i'm i doing wrong?

    6. VARSHA

      Any idea why it is displaying alert message for both items when lose focus of first item

    7. Vinish Kapoor

      It is interesting. You can try changing the event. Try to use Change event and then see.

    8. VARSHA

      I tried with Change event but the message is not displaying until i try to change the item value ..
      I need the message to display after lose focus

  5. srajan

    This is an excellent post. Would you know, how can we display the error message inline with field? Basically, if user gives incorrect input, the error message is displayed right next/below the input field where user entered.
    This is supported out-of-the-box by apex for server side validation where we can choose
    to show error message inline with field and in notification.

  6. Ankit

    really helpful post!!
    I tried to create the same validation for IG and it's working perfectly fine.
    I just wanted to know how to focus on the IG column and mark the cell as red (similar to when we create normal validations).
    any idea how to do this?

    Thanks

  7. Saran

    Hi Vinish,
    I Tired what mahendra asked. The code is working...but the error notification cant able to close.....
    i mean i validate the pageitem where it is null or not null....i used ur method to validate is null....even i give value i cant able to go to next page item.
    can u just to solve this error

Comments are closed.