Client Side Validation in APEX Without a Round Trip

Why Client Side Validation Matters

APEX’s built in validations run on the server after the user submits the page. While server side validation is essential for security and data integrity, the round trip to the server and back creates a noticeable delay, especially on slower connections. Client side validation provides instant feedback, improving the user experience without replacing server side checks.

Using APEX’s Built In Client Side Features

APEX includes several declarative client side validation features. Setting an item’s “Value Required” property adds HTML5 required attribute validation. Setting “Maximum Length” on text fields prevents the user from entering too many characters. For date items, the date picker inherently constrains input to valid dates.

For numeric validation, use the item’s “Format Mask” and the HTML5 input type. In APEX 21.2 and later, you can set the “Input Type” attribute to “number” or “email” to leverage browser native validation.

Custom JavaScript Validation

For business logic validation that goes beyond HTML5 capabilities, create a Dynamic Action that fires before the page is submitted:

// Dynamic Action: Event = Before Page Submit
// Action: Execute JavaScript Code
(function() {
    var startDate = new Date(apex.item("P10_START_DATE").getValue());
    var endDate = new Date(apex.item("P10_END_DATE").getValue());

    if (endDate <= startDate) {
        apex.message.showErrors([{
            type: "error",
            location: ["page", "inline"],
            pageItem: "P10_END_DATE",
            message: "End date must be after the start date.",
            unsafe: false
        }]);
        apex.event.gCancelFlag = true; // Prevent submission
        return;
    }

    var budget = parseFloat(apex.item("P10_BUDGET").getValue());
    if (budget > 100000 && !apex.item("P10_MANAGER_APPROVAL").getValue()) {
        apex.message.showErrors([{
            type: "error",
            location: ["page", "inline"],
            pageItem: "P10_MANAGER_APPROVAL",
            message: "Manager approval is required for budgets over $100,000.",
            unsafe: false
        }]);
        apex.event.gCancelFlag = true;
        return;
    }
})();

Clearing Errors Dynamically

When implementing client side validation, always clear previous errors before showing new ones to avoid stacking error messages:

apex.message.clearErrors(); // Clear all previous errors first

Important: Never Trust the Client Alone

Client side validation is a user experience enhancement, not a security measure. Always duplicate critical validations on the server side, because JavaScript can be disabled, modified, or bypassed. The ideal pattern is client side validation for immediate feedback plus server side validation for data integrity.