Introduction:
In Oracle APEX forms, ensuring users complete all required fields before submission is essential for maintaining data quality.
Instead of interrupting them with alert pop-ups, we can provide a cleaner, friendlier UI by disabling the Save button until all required fields are filled — and adding a tool-tip that lists the missing fields.
This approach gives instant feedback without breaking the user’s flow, making it ideal for admin dashboards, wizard steps, and complex forms.
The following technologies are used to achieve this:
- Oracle APEX Interactive Reports
- JavaScript
- CSS(inline styles for tooltip)
Why We Need to Do This?
Better UX with Instant Feedback:
Users see exactly which fields are missing without having to submit the form and face an error message.
Non-Intrusive Validation:
No disruptive alerts — just a helpful tool-tip.
Improved Data Accuracy:
Reduces the chance of incomplete submissions, especially in forms with many required fields.
Professional Look & Feel:
Gives your APEX app a polished, modern, and responsive interaction style
How Do We Solve This
Step 1: Set “Value Required” for Each Page Item
For each required page item:
Go to Page Item Attributes → Validation Section
Set Value Required = Yes
This ensures APEX treats the field as mandatory.
Step 2: Set Static ID for the Save Button
For your Save button:
Go to Button Attributes
Set Static ID = BTN
Step 3: Add JavaScript in “Execute When Page Loads”
Navigate to:
Page Attributes → Execute when Page Loads
Paste the following code:
function checkRequiredFields() {
const $btn = $(‘#BTN’);
if (!$btn.parent().hasClass(‘tooltip-wrapper’)) {
$btn.wrap(‘<div class=”tooltip-wrapper” style=”display:inline-block;position:relative;”></div>’);
}
const $wrap = $btn.parent();
const requiredItems = $(‘input[required], textarea[required], select[required]’)
.map(function () {
return {
id: this.id,
label: $(‘label[for=”‘ + this.id + ‘”]’).text().replace(‘:’, ”).trim() || this.id
};
}).get();
const missing = requiredItems.filter(f => !$v(f.id)?.trim());
const msg = missing.length ? ‘Please fill:\n’ + missing.map(f => `• ${f.label}`).join(‘\n’) : ”;
$btn.prop(‘disabled’, !!missing.length);
$wrap.off(‘mouseenter mouseleave’);
$(‘.custom-tooltip’).remove();
if (missing.length) {
$wrap.on(‘mouseenter’, () => {
$(‘<div class=”custom-tooltip”></div>’).text(msg).css({
position: ‘fixed’,
top: $wrap.offset().top,
left: $wrap.offset().left + $wrap.outerWidth() + 10,
background: ‘#333’,
color: ‘#fff’,
padding: ‘6px 10px’,
borderRadius: ‘4px’,
fontSize: ’12px’,
whiteSpace: ‘pre-line’,
zIndex: 1000,
maxWidth: ‘250px’
}).appendTo(‘body’);
}).on(‘mouseleave’, () => $(‘.custom-tooltip’).remove());
}
}
// Run initiallycheckRequiredFields();
// Watch for changes on any required field
$(‘input[required], textarea[required], select[required]’).on(‘input change’, checkRequiredFields);
Conclusion:
This method keeps the Save button disabled until all required fields are completed, guiding users with a clean tool-tip instead of disruptive alerts. It’s APEX-native, plugin-free, and reusable across different forms, improving both usability and data accuracy.
Output:
- Save button remains disabled if required fields are empty.
- Tool-tiplists exactly which fields are missing.
- Tool-tipdisappears automatically when all fields are filled.
