[Closed] Cannot validate dates in my form after I write conditions for the datepickers

[Author]

Posts

[fredr]

Tell us what you are trying to do?
I'm trying to create a form with three dates, with a condition : the second date should be after the first one and before the third one, and the datepickers should not allow to select a "wrong" date.

Is there any documentation that you are following ?

I am using the recipe in this support forum thread (adapted to the fact that I have three dates, not two) :
https://toolset.com/forums/topic/this-field-is-required-error-but-field-is-filled-out/
It is supposed to solve my exact "fields not saving" problem, but it does not work. I can't understand what is the issue.

Here is my complete JS code for that form :

///First function, not related to the question
jQuery(document).ready(function($) {
setTimeout(function() {
if($( "input.js-wpt-date" )) {
$("input.js-wpt-date").each(function() {
val = $(this).val();
$(this).datepicker("option", "yearRange", "-3:+5");
$(this).datepicker("option", "numberOfMonths", 3);
$(this).val(val);
});
}
}, 500 );
}) ;

/// INTERESTING THINGS START HERE

jQuery(document).ready(function() {
var fromId = jQuery('input[name="wpcf-date-de-mise-en-production[display-only]"').attr('id');
var intId = jQuery('input[name="wpcf-date-de-fin-de-tournage[display-only]"').attr('id');
var toId = jQuery('input[name="wpcf-date-de-fin-de-post-production[display-only]"').attr('id');

var $from = jQuery( '#' + fromId );
var $int = jQuery( '#' + intId );
var $to = jQuery( '#' + toId );

var alt_filed_from = jQuery('input[name="wpcf-date-de-mise-en-production[datepicker]"').attr('id');
var alt_filed_int = jQuery('input[name="wpcf-date-de-fin-de-tournage[datepicker]"').attr('id');
var alt_filed_to = jQuery('input[name="wpcf-date-de-fin-de-post-production[datepicker]"').attr('id');

$from.datepicker('option', 'dateFormat', 'd MM yy' );

$from.datepicker('option', 'minDate',0);
$from.datepicker('option', 'onSelect', function( selectedDate, obj ) {
if(selectedDate) {
var sd = selectedDate.split("/");
stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
stamp = parseInt(stamp/1000);
jQuery('#'+alt_filed_from).val(stamp);
$int.datepicker( "option", "minDate", selectedDate );
}
});

$int.datepicker('option', 'dateFormat', 'd MM yy' );
$int.datepicker('option', 'onSelect', function( selectedDate, obj ) {
if(selectedDate) {
var sd = selectedDate.split("/");

stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
stamp = parseInt(stamp/1000);
jQuery('#'+alt_filed_int).val(stamp);

$int.datepicker( "option", "maxDate", selectedDate );
$to.datepicker( "option", "minDate", selectedDate );
}
});

$to.datepicker('option', 'dateFormat', 'd MM yy' );
$to.datepicker('option', 'onSelect', function( selectedDate, obj ) {
if(selectedDate) {
var sd = selectedDate.split("/");
var newDate = sd[1]+"/"+sd[0]+"/"+sd[2];
stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
stamp = parseInt(stamp/1000);
jQuery('#'+alt_filed_to).val(stamp);
$int.datepicker( "option", "maxDate", selectedDate );
}
});
});

Is there a similar example that we can see?

What is the link to your site?
declarations.cchscinema.org (password : reaumur). But I have deactivated the code that creates problems, since the client is testing the website at the moment.

[Christian Cox]

Hello, my first suggestion is to try a different event handler instead of jQuery(document)ready. Notice in the other example, the event handler is tied to the window's load event. That's part of the problem here, because Forms is not fully initialized on the document ready event.

Please note that there is no public JavaScript API for Forms, so support for this type of custom code is limited here in the forums.

[fredr]

I had tried, and I just tried again : it does not solve the problem.

[Christian Cox]

Is this live on your site somewhere I can see? Please provide a URL.

[fredr]

The website url is declarations.cchscinema.org

The password to access the site is : reaumur

The page is hidden link

But the script is off at the moment, since the client is testing the rest of the application , and you need to create an account to see the page. I can create one for you with admin access if you want.

[fredr]

I've already written an answer but it seems to have disappeared... Apologies if this is a duplicate :

- The site is in french, so I give you the URLs below, to make things simpler for you

- The address of the page is : hidden link
- There is a password to access the site : reaumur
- You need to create an account to access the page (account creation url : hidden link).
- I can also create an account with admin access if you want to.
- The script is not active at the moment, since the client is testing the application.

[Christian Cox]

Yes an admin account would be helpful. If the client is testing the site, could I clone this Form, add the previously discussed JavaScript code and place it on a testing page somewhere?

Private reply fields are enabled here so you can share admin access details.

[Christian Cox]

I created a test page and added a clone of the original Form. I moved the datepicker initialization code into the setTimeout callback you already had created, and now I can see the minimum date applied to the calendar when I open the first datepicker. Can you check here to see if the max and min functions you created are working as expected?

hidden link

[fredr]

Yes, that works well and that worked well already.
The problem is when saving the form : for the three datepickers you get a "Please enter a valid date" alert, and the form does not save.
(I'm sorry, I did not explain the problem clearly enough).
Don't hesitate to enter dummy data to test if needed.

[Christian Cox]

Thanks, I just wanted to confirm because there are some issues in your code. The code here is tightly coupled to a specific date format, which your datepickers do not currently use. I added console logging to expose the first error I encountered. In the $from datepicker onSelect handler, the sd variable assignment is trying to split a date with the '/' character, but your custom date format does not include '/' characters, so the resulting stamp evaluation is NaN.

...
$from.datepicker('option', 'onSelect', function( selectedDate, obj )  {
    if(selectedDate) {
     console.log('selectedDate: ' + selectedDate);
      var sd  = selectedDate.split("/");
    
     stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
     stamp = parseInt(stamp/1000); 
     console.log('stamp: ' + stamp);

Resulting console log:

selectedDate: 29 avril 2021
stamp: NaN

The JavaScript function Date.UTC expects numeric input, not text input, so you'll need to convert your date into an understandable format to use the Date.UTC function like this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC

[fredr]

Thanks. I'll try to do that (if you have a suggestion I'll take it happily).

I don't understand why this code seems to work in other cases (the forum thread that I used at https://toolset.com/forums/topic/this-field-is-required-error-but-field-is-filled-out/) and not in this case.

[Christian Cox]

I don't understand why this code seems to work in other cases...and not in this case.
You should be aware this is not a cut-and-paste solution for all cases, it works for that specific case and specific date format. As I said, your datepicker code implements a different date format from the date format used in the other code. The other format has a numeric month, and yours does not use a numeric month, for example. The code here is tightly coupled to a numeric date format, to create the corresponding date objects.