Single Article

Validation errors in jQuery modal dialog

Category APEX and jQuery

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 working example.
See also original article in Oracle APEX forum.

Comment Button

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     

Global Right Column

Search

Archives

Subscribe in a Reader