Skip to Main Content

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.

Comments

  • Jari Laine 26 May 2011

    Hi,

    This method works all validation as I have tested.
    Make sure your validation text do not contain line breaks or special characters.

    Also, inline field validation shows only last message from failed validations.
    Meaning, if you have 2 validations for one item and both fails when page is submitted, only last message will be in dialog.

    Regards,
    Jari

  • lutfi 26 May 2011
    Hi Jari thanks for sharing.. i had implemented your code, it's works only if using validation type "Item specific is NOT NULL", when i used other type like "PL/SQL expression" or "Function returning boolean" windows modal fail to display. any suggestion Bunch of Thanks Lutfi
  • Jari Laine 26 May 2011

    Hi,
    You can read original post from OTN.

    Article "Add style to form item with jQuery after validation error" might also help

    Regards,
    Jari

  • Bhavin 26 May 2011
    Hi, Thanks for your great post. We implemented this is our APEX v3.2 application, it workd fine except color style. How to add color style so error/validation fields get styled like yours (after Submit button)? Your help would be appreciated. Regards, Bhavin