Multiple dates on a form with validation and AJAX refresh

Multiple dates on a form with validation and AJAX refresh

  

Hi,

I'm trying to implement a form in which a user can add up to 4 dates. The default value for the dates should be blank and in the format dd-MMM-yyyy (e.g.: 22-Aug-2018).

I need to be able to show/hide dates when user clicks on the add/remove button and I need to validate each date (see picture attached). However, when I run the AJAX refresh to refresh the whole container (in order to display the right number of dates and to show/hide the buttons accordingly), the Valid property of each input gets reseted.


Also, when I choose the DateFormat in Input_Calendar to "%d-%b-%Y", the input doesn't recognize it as a date, showing the error message "Date expected".


Can someone tell me which is the best way to implement this, so I don't have to use an AJAX for each input and so I don't need to use a lot of If conditions to show/hide each one of them?


Thank you,

Ana Santos

Hi Ana,

Can you share an oml with what you have so far so we can better help you?

Regards,

Marcelo

Actually I cannot, but I will try to explain it the best I can.


As you can see by the picture attached, I have one container for each date input / calendar. The user needs to enter at least one date and can add up to 4 dates. I'm using conditions and AJAX refresh to show/hide each date as well as the "Add another date" and trash bins. I have a function to validate the dates on the OnChange() property of the input and I assign its result to the Valid property if the input. 

When a user picks an invalid date, a message appears. However, if the user clicks on the "Add another date" or on the trash bin, since I do an AJAX to the whole AssessmentDatesContainer, the Valid property of each input gets reseted to true and I am able to submit the form. What I need to know is what is the best approach to validate each date, without having to do a lot of If conditions and AJAX refresh on each input, since I don't find it efficient.


Additionally, I need the default date to be blank (with a prompt) and in the format dd-MMM-yyyy (e.g.: 22-Aug-2018), but when I set the DateFormat in Input_Calendar to "%d-%b-%Y" and then pick a date, I get an error saying "Date expected" or required field - seems like the input doesn't recognize it as a date.


Could you help me to achieve these behaviours?


Many thanks.

Hi Ana,

For the Input_Calendar to properly work with another date format you need to either set the Environment's date format accordingly (and redeploy everything) or (I think this works) use Text inputs to store your dates (don't forget to convert them to the OutSystems Date type on submit.

Typically validations are done on submit of the entire form, on change, although in principle improve UX as the user has immediate feedback can sometimes be problematic in terms of user interaction (too many server requests as a user types, for instance) and can be reset by Ajax refreshes, like you experienced.

For a situation like this, where you want validation to be applied on change I would refresh individual Containers, so runtime properties aren't reset, but I still think you must re-validate everything on submit.

Hi Jorge,

Thanks for your reply. Actually, the input associated with Input_Calendar is of type text. If I want to have the validation messages before submitting the form, how would I be able to do these convertion?

The problem with refreshing individual containers (besides having too many AJAX refreshes) is that I have multiple steps on the form (I show/hide the forms' questions based on the step number), so if I go back and forward on the form I will have the same problem (because in that case, I really need to refresh the whole container). 

Thanks for your help!