Support Article
Client side validation not working on mobile for date fields
SA-83711
Summary
Client-side validation does not work for Date fields on mobile device browsers.
Error Messages
Not Applicable
Steps to Reproduce
- Include a 'Received Date' - a DateTime property in a section.
- Check the 'Use native controls on mobile' checkbox in the Presentation tab.
- Add an onChange event on the 'Received Date' to invoke a data transform.
- Pass the Date value as a parameter to the data transform.
- Extend and customize the client-side Validation for this date (for example, to clear the Date value if a future date is entered).
On a desktop browser, when a future date is entered, the value is cleared. An empty value is passed as a parameter to the data transform.
On a mobile browser, when a future date is entered, the value is cleared. However, the entered value is passed as a parameter to the data transform.
Root Cause
When using the out-of-the-box Calendar control, the Pega application is in control of the HTML and Validation on the values entered. The application ensures that the onChange is triggered after client-side validations are enforced.
When using the native Calendar control, the mobile operating system is in control of performing the basic Validation (for example, not entering random characters for the Date field). Once that is done, the operating system populates the control with the value and both the client-side validation and onChange are triggered almost simultaneously. Hence, the data transform receives the incorrect value.
Resolution
Perform either of the following local-changes:
- Uncheck the 'Use native control on mobile' option.
- Move to a Server-side validation for this Date field.
Published August 19, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.