Introduction
Client-Side Validation for APEX_ITEM Elements in Classic Report Using JavaScript” refers to the process of implementing validation checks directly in the browser for elements created using the APEX_ITEM package within a Classic Report in Oracle APEX. By using JavaScript, we can validate user inputs in real-time, ensuring that data in one column meets specific criteria based on the values in the next column. This approach enhances user experience by providing immediate feedback and reducing the need for server-side validation.
The following technology are involved to done this.
- Oracle APEX
- JavaScript
- HTML & CSS
Why we need to do
Client-side input validation can help reduce server load and can prevent malicious users from submitting invalid data.
User data is validated for correctness and completeness before submission.
Feedback is provided immediately to guide users in correcting errors.
In our scenario, it checks dynamically based on the format of another column.
We can also change our validation code dynamically at runtime.
How do we solve
Step1: Create Classic Report with Following Query
SELECT
APEX_ITEM.text(
p_idx => 1,
p_value => empno,
p_item_id => ‘f01_’ || rownum
) AS EMPNO,
APEX_ITEM.text(
p_idx => 2,
p_value => hiredate,
p_item_id => ‘f02_’ || rownum,
p_attributes => ‘class=”validate” placeholder=”Enter date format dd-mm-yy here” ‘ ||
‘onchange=”validateItem(this)” required data-format=”‘ || DATE_FORMAT || ‘”‘
) AS hiredate,
APEX_ITEM.text(
p_idx => 3,
p_value => DATE_FORMAT,
p_item_id => ‘f03_’ || rownum
) AS HELP_LINE
FROM Emp;
Query Explanation
p_attributes => ‘class=”validate” placeholder=”Enter date format dd-mm-yy here” onchange=”validateItem(this)” required data-format=”‘ || DATE_FORMAT || ‘”‘:
class=”validate”: Assigns the CSS class validate to the input element. This can be used to apply specific styles or JavaScript behaviors.
placeholder=”Enter date format dd-mm-yy here”: Sets the placeholder text for the input field, guiding the user on the expected date format.
onchange=”validateItem(this)”: Specifies a JavaScript function validateItem(this) to be called whenever the value of the input field changes. The this keyword refers to the current input element.
required: Marks the input field as required, meaning the form cannot be submitted without a value in this field.
data-format=”‘ || DATE_FORMAT || ‘”‘**: Adds a custom data attribute data-formatto the input element. This attribute holds the value of DATE_FORMAT, which is expected to be a format string indicating the required date format. The DATE_FORMAT` value is dynamically inserted into the HTML attribute.
Step2: Select All Columns (Empno, HireDate, Date_Format) and disable Escape special character property
Step3: In Page Header under Function and Global Declaration paste the following code
function validateDateFormat(dateValue, format) {
// Define a mapping of format components to their regex equivalents
const formatMap = {
‘YYYY’: ‘\\d{4}’, // Four-digit year
‘YY’: ‘\\d{2}’, // Two-digit year
‘MM’: ‘\\d{2}’, // Two-digit month (01-12)
‘M’: ‘\\d{1}’, // One-digit month (1-9)
‘DD’: ‘\\d{2}’, // Two-digit day (01-31)
‘D’: ‘\\d{1}’, // One-digit day (1-9)
‘MON’: ‘[A-Za-z]{3}’, // Three-letter month abbreviation (case-insensitive)
‘HH’: ‘\\d{2}’, // Two-digit hour (00-23)
‘MI’: ‘\\d{2}’, // Two-digit minute (00-59)
‘SS’: ‘\\d{2}’ // Two-digit second (00-59)
};
// Escape special characters in the format string and replace format components
let regexString = format.replace(/[.*+?^${}()|[\]\\]/g, ‘\\$&’);
// Replace format components (YYYY, YY, MM, DD, MON, HH, MI, SS) with corresponding regex parts
regexString = regexString.replace(/YYYY|YY|MM|M|DD|D|MON|HH|MI|SS/g, match => formatMap[match]);
// Create a regular expression from the modified format string
const regex = new RegExp(`^${regexString}$`, ‘i’); // Added ‘i’ flag for case insensitivity
// Validate the date against the dynamically created regular expression
return regex.test(dateValue);
}
function validateItem(item) {
var datePattern = item.getAttribute(‘data-format’);
var value = item.value;
console.log(‘Item Value’,value);
if (!validateDateFormat(value, datePattern)) {
alert(‘Check the format’);
item.style.borderColor = ‘red’;
}
else
{
item.style.borderColor = ‘green’
}
Step4: Save & Run the application
Conclusion
In conclusion, client-side validation for APEX_ITEM package elements in classic reports using JavaScript not only enhances the usability of APEX applications but also contributes to more efficient data management and improved user satisfaction. By leveraging client-side validation, organizations can create robust and user-friendly applications that meet the highest standards of data integrity and user experience
Screen Shot: 1
Screen Shot:2
