Validation errors in jQuery modal dialog

Here is how you can show form validation errors in jQuery modal dialog. If you are using APEX 3.x, load jQuery and jQuery UI library and css in page template header or page HTML header.

Create HTML region to page zero

• Position: "After Header"
• Template: "No Template"
• Region source:

  <div id="htmldbErrDialog" title="Validation Error !" style="display:none">
   <ul>
   </ul>
  </div>
  <script type="text/javascript">
  $(function(){
   if($('#htmldbErrDialog').find("li").length>0){
    $('#htmldbErrDialog').dialog({
     modal:true,
     resizable:false,
     buttons:{
      "Ok":function(){
       $(this).dialog("close")
      }
     }
    })
   }
  })
  </script>
  

Go Home > Application Builder > Application xxx > Shared Components > Templates. Filter report by Type "Label". Then copy label template you use to new name. Edit new label template and change "On Error After Label" to be:

<script type="text/javascript">
 $('#htmldbErrDialog').find("ul").append($("<li/>",{"text":"#ERROR_MESSAGE#"}))
</script>

Change form items to use your new label template.

See also original article in Oracle APEX forum.