Oracle APEX Interactive Grids (IGs) are great for managing multiple rows of data, but they also come with risks.
One common issue? Users accidentally submitting incomplete rows.
For example, leaving both PERSONID and FIRSTNAME blank in a row might not seem like a big deal — until it breaks logic, disrupts workflows, or pollutes your data.
In this post, let’s look at a clean, client-side validation (done via JavaScript) that stops such records before they ever hit your database.
The Scenario
You’re capturing employee records using an Interactive Grid. A user adds a few rows but forgets to fill in one of them — and maybe only checks a checkbox before clicking Save.
For example, leaving both PERSONID and FIRSTNAME blank in a row might not seem like a big deal — until it breaks logic, disrupts workflows, or pollutes your data.
Even without editing any visible columns, that row can still be submitted — and that’s where the trouble begins.
This isn’t just about that one row — it’s about data quality, maintainability, and user trust.
The Objective
We want to prevent saving if any row has both PERSONID and FIRSTNAME blank.
Instead of letting bad data through:
- We’ll catch it instantly
- Show a clear page-level error
- And stop the submission right there
All of this happens on the client side, using JavaScript.
What the JavaScript Validation Does
Here’s how the logic works:
- A function runs when the Custom Save button is clicked.
- It fetches all records from the grid.
- Each row is checked to see if both PERSONID and FIRSTNAME are blank.
- If any such row is found:
- Validation stops immediately.
- A page-level error message is shown.
- The form is not submitted.
- If no issues are found, the form proceeds as expected.
This protects your database from incomplete entries and gives users immediate feedback.
Why Page-Level Errors?
Page-level messages are:
- Easy to spot
- Consistent with APEX UI behavior
- Clearer than row-by-row inline errors
It ensures the user understands what went wrong without scanning the entire grid.
Why This Matters
✔️ Stops incomplete records from reaching the database
✔️ Reduces backend errors and rework
✔️ Improves the user experience
✔️ Keeps your app logic clean and reliable
When to Use This
Use this pattern when:
- Certain fields must be filled together
- You want to validate data before it’s submitted
- You’re dealing with bulk entry workflows
- You want client-side checks to catch simple errors early
Pro Tips
- Extend this to other fields like
EMAIL,PHONE, etc. - Want to check only changed rows? Use IG APIs to target modified data.
- Always clear existing messages before displaying new ones to avoid clutter.
Final Thought
Client-side validations like these may seem small, but they make a big impact.
They prevent dirty data, improve the user journey, and reduce frustration — both for your users and your backend logic.
Happy developing! 🚀
