Date picker displays required error message after selecting the date

  • ACIBM
    Asked on March 21, 2025 at 9:45 AM

    Hello!

    On our Clarity Call Application form, the date picker fields display a "This field is required." error when it is in the process of being filled out, which wasn't happening before (I test this form every week) and it is confusing for our pre-members filling this out.

    This error usually only displays if you click away from the field, but it is displaying right after you pick a date in the calendar (and haven't even clicked to the time portion).

    I've cleared the cache several times and this has not helped. Any support with resolving this would be much appreciated, thank you! :)

    Krista

    Jotform Thread 25460901 Screenshot
  • Jason JotForm Support
    Replied on March 21, 2025 at 10:47 AM

    Hi Krista,

    Thanks for reaching out to Jotform Support. This is normal behavior for the Date Picker field. After selecting a date, our form will recognize the time field as empty for that date picker element. You can inject CSS code into your form if you don't want the required message to display after the date is selected. Let me show you how:

    1. First, copy this code:

    .error-navigation-container {
    display:none !important;
    }
    .form-error-message {
    display: none !important;
    }

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    Date picker displays required error message after selecting the date Image 1 Screenshot 30

    The required message will no longer appear, but the user won't be able to proceed if the required date picker time field remains empty:

    Date picker displays required error message after selecting the date Image 2 Screenshot 41

    Additionally, all required fields will never get a required field message when the form user leaves them empty. However, they won't be able to proceed with the submission if any required fields are left empty.

    Reach out again if you need any more help.

  • ACIBM
    Replied on March 21, 2025 at 3:16 PM

    Hi Jason,

    This is so strange, because up until today the date picker form fields only displayed that "error" if you select a date (or time) and then click somewhere OFF the date picker form field afterwards. If you clicked on a date and then your next click was on the time field, the error didn't display in between those clicks. Now it is displaying as soon as you select a date.

    This was not definitely not happening before so I am confused how this is "normal behaviour". It's basically giving me an error WHILE I'm still filling in the date picker form field.

    That said, we definitely want it to display an error if someone has forgotten to fill in a field so we wouldn't want to disable it all together, but this is confusing for pre-members and was not happening before. I test this particular form every week and this is the first time this has happened for me.

    Please confirm that this is truly the way the form is supposed to operate (display an error WHILE the date picker form field is still being filled in). Thanks!

    Krista

  • Ronald JotForm Support
    Replied on March 21, 2025 at 3:34 PM

    Hi Krista,

    I cloned your form to test it, and I easily replicated the issue. There is an easy fix for this, we just need to use a new Date field. Let me show you how:

    1. While in Form Builder, click on the Add Element menu on the left side of the page.
    2. Under the Basic tab, scroll down the list and choose the Date field.
    3. Now, just drag and drop it to your form.
    4. Click the Gear icon and go to Time tab to enable the Time Field.

    Date picker displays required error message after selecting the date Image 1 Screenshot 30 You can hide your previous Date fields, so your form fillers won't see and fill them in at the same time, to keep the previous submission data of the field.

    1. In Form Builder, select the field and click the Gear icon.
    2. Go to Advanced tab and enable the Hide Field option.

    Date picker displays required error message after selecting the date Image 2 Screenshot 41Give it a try and reach out again if you have any other questions.