validating 2 date fields

[Székely Dénes (webGóbé)]

Hello!

I described the problem in the official forum too, here:

https://forum.joomla.org/viewtopic.php?f=833&t=1014544#p3739325

In nutshell, in my custom Joomla5 component I have a form with 2 date fields, vacation_start and vacation_end and I am trying to implement a validation to prevent adding for vacation_end a date before the vacation start.

I started from this tip:

https://docs.joomla.org/J4.x:Joomla_4_Tips_and_Tricks:_Check_two_dates

but basically can't get it work.

What I have so far:
I created a calendarform.js

Code:

document.formvalidator.setHandler('vacation_end', function (value) { 

console.log(); 

let vacation_start = document.getElementById('jform_vacation_start').value; 

if (new Date(value).valueOf() <= new Date(vacation_start).valueOf()) { alert(Joomla.Text._('COM_FRHG_JS_ERROR_DATES_WRONG_ORDER')); 

return false; 

} 

return true; 

});

I added to component's joomla.asset.json this:

Code: 

{ "name": "com_frhg.calendarform", "type": "script", "uri": "com_frhg/calendarform.js", "dependencies": [ "jquery", "form.validate", "core" ], "attributes": { "type": "module" }

I added to the PHP file of the form this:

Code: 

$wa = $this->document->getWebAssetManager(); 

$wa->useScript('keepalive') 

    ->useScript('form.validate')

    ->useScript('com_frhg.calendarform');

Something is still wrong, the JS file is loaded, there is nothing in the console, but the validation simply does not kick in.
Already asked for help on other forums, and got some extra ideas, to add timing to the script, to initialize the formvalidation, etc, so currently I have this JS:

Code: 

document.formvalidator = new window.JFormValidator(); setTimeout( () => { document.formvalidator.setHandler('vacation_end', function (value) { console.log(); let vacation_start = document.getElementById('jform_vacation_start').value; if (new Date(value).valueOf() <= new Date(vacation_start).valueOf()) { alert(Joomla.Text._('COM_FRHG_JS_ERROR_DATES_WRONG_ORDER')); return false; } return true; }); , 0 });

But still nothing. What I am missing???

[Steven Berkson]

According to the forum, this seems to be resolved. Is that correct?

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion, visit https://groups.google.com/d/msgid/joomla-dev-general/f05e950c-be07-4e8a-8aa1-2b6cf6af4300n%40googlegroups.com.

[Székely Dénes (webGóbé)]

Yes, it is fixed. I overlooked a small but important detail. In the form definition XML you need to add the validation classes for the fields involved, like

<field name="vacation_start" default="0000-00-00 00:00" class="inputbox validate-vacation_start"

so a class name with the structure 'validate-FIELDNAME'.

[Steven Berkson]

Just FYI, and correct me if I am wrong, but I do not think 'validate-FIELDNAME' is correct. I think it is 'validate-RULENAME' and the rule name is a match for document.formvalidator.setHandler('vacation_end', function (value)

 

This way you can make a rule and apply it to more than one field. I believe your rule will work just fine if the xml file said:

 

<field

name="'vacation_end'"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class="validate-date_spread"

      required="required"

/>

 

And your rule said

 

document.formvalidator.setHandler('date_spread', function (value) {

 

It won’t matter for you on this because your rule specifies specifically 'jform_vacation_start', but you could make the rule more sophisticated and generic by searching for the date field immediately prior or applying a class to the comparator field and finding that field.

Something Like:

<field

name="'vacation_start'"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class=""

      required="required"

/>

<field

name="'vacation_end'"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class="validate-date_spread check-vacation_start"

      required="required"

/>

Then you could, for example use the same rule for something like checking multiple dates and their distance to the first date field:

<field

name="'project_start'"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class=""

      required="required"

/>

<field

name="project_step1"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class="validate-date_spread check-project_start"

      required="required"

/>

<field

name="project_step2"

      type="calendar"

      label="COM_FRHG_MYLABLE"

      description=" COM_FRHG_MYDESC"

      class="validate-date_spread check- project_start"

      required="required"

/>

Or figure out how to put an identifier in the validated field identifying which field to compare to and retrieve it in your rule.

Just a thought…

To view this discussion, visit https://groups.google.com/d/msgid/joomla-dev-general/9c3bd75e-3e3a-41a5-abf1-9bff0ce659fen%40googlegroups.com.

[Székely Dénes (webGóbé)]

Interesting idea! I bookmarked it. Well, you probably are right about the RULENAME thing. For the beginner-level JS junkies like me, the important part is to have consistency across the code - and that worked. BTW, the official Joomla tip I used is unclear at best when comes out avout this class-thing.

But your idea opens some horizons for me ;) Thanks!

[Steven Berkson]

It has not come up in the rules that I have made yet, but, if you’re interested, the first key would be identifying and getting the specific field. My test say that if you write you rule like this…

 

document.formvalidator.setHandler('date_spread', function (value, element) {

 

element is the specific element being validated, even if multiple elements have the same class. With element you could get the classes of the element being evaluated and look for something like class compare-vacation_start and use the same rule for a field called work_end with classes “validate-date_spread compare-work_start”

To view this discussion, visit https://groups.google.com/d/msgid/joomla-dev-general/c4506967-67bb-4999-bb4a-c94e4d726989n%40googlegroups.com.