Onchange not activating on date field on incorrectly formatted date

Onchange not activating on date field on incorrectly formatted date

  

I am trying to reformat an input string in a text field from "MMddyyyy" to the proper "MM-dd-yyyy" format. I have created a function that will do the formatting and am trying to make a call to said function as part of the On Change event. However, the On Change event is not activating unless the user enters the date in "MM-dd-yyyy" format.

The variable this input is tied to is a date type. Is this what is causing the issue? I have tried changing the variable to a text type, but doing so drops the type validation during the form submission.

My suggestions:

- Use a date picker

- Use an input mask

- Process it as a text, do server-side validation of the contents and then convert it to the expected format.


Would this work?

Armando Gomes wrote:

My suggestions:

- Use a date picker

- Use an input mask

- Process it as a text, do server-side validation of the contents and then convert it to the expected format.


Would this work?

Server-side validation does not sound like it will work in this case, since the setting this date affects other inputs on the form.

I currently have an Input Calendar widget attached to the input, but the user wants to also be able to just type the numbers and have the date be auto-formatted. An input mask sounds like it would be the best option for this use case, but I am not sure how well it will work alongside the Input Calendar widget.

Hi Cody,

If you have "Client & Server" validations on, the data type will be checked (and fail) before the On Change is ever triggered on the server-side. You'd have to have "Server" validations only, and the data type validation would fail (but you can get the actual input the user typed from the runtime properties of the input widget).

I'd say your best option is probably with the "Input Masks" or "Custom Masks" components, although I'm also not aware of what interactions might happen with the Input Calendar RichWidget... have you checked the other date picker components available on the Forge?

Solution

Hi Jorge, 

I looked in to the two masking components you mentioned and actually found a third option that suits my needs: jQueryInputMask

The predefined mask entity didn't have the mask I wanted, but I was able to make my own entity and pass in the mask that I wanted.

The widget also works alongside the Input Calendar Richwidget.

Thank you for your assistance!

Solution