Validate rules and reactdatepicker configuration

[g3r0me]

Hi.

I'm having trouble customizing a donation form.
I need to add two fields to it.
One to register for a donor's birthday.
And a second one to register the ID number of the donor.
Before proceeding with the donation, both fields have to be checked to verify that the donor is over 18. Some numbers in the ID value must match the month and year of the birthday value.

So far, I have created 2 custom fields : date and text :

add_action('givewp_donation_form_schema', static function (Give\Framework\FieldsAPI\DonationForm $form) {

    // birthday
    $field_date = Give\Framework\FieldsAPI\Date::make('birthday')
    ->showInReceipt()
    ->label('Birthday')
    ->placeholder('01/01/1970') // placeholder not working on date field by the way
    ->dateFormat('dd/mm/yyyy')
    ->required()
    // ->rules()
    ->showInAdmin();

    // id
    $field_id_num = Give\Framework\FieldsAPI\Text::make('id_num')
    ->showInReceipt()
    ->label('ID Number')
    ->placeholder('95052125896')
    ->required()
    ->maxLength(11)
    ->minLength(11)
    ->showInAdmin();

    $form->insertBefore('donationAmount', $field_date);
    $form->insertAfter('birthday', $field_id_num);

});

I'm currently stuck to limit birthday selection to years overs 18 and to check the values.

reactdatepicker, used in the date field, is able to exclude date intervals:
https://reactdatepicker.com/#example-exclude-date-intervals
How could I "override" the default configuration to achieve this?

It seems that Give has tools to validate rules (->rules() / HasValidationRules), but I can't find resources to make it work.
I also tried to load a custom javascript to the form to check values this way, but I only managed to load it on the confirmation step.
Could you describe how to use the validation rules and/or to enqueue a custom script on the form?

Kind regards.
Gérôme

[jonwaldstein]

@g3r0me you can use a custom rule closure. You can learn more about our validation library we use for our fields here.

\Give\Framework\FieldsAPI\Date::make('birthday')
    ->rules(function ($value, Closure $fail, string $key, array $values) {
        $today = new DateTime('today');
        $date = new DateTime($value);
        if ($date->diff($today)->y < 18) {
            $fail('You must be at least 18 years old to donate.');
        }
    });

\Give\Framework\FieldsAPI\Text::make('id_num')
    ->rules(function ($value, Closure $fail, string $key, array $values) {
        $today = new DateTime('today');
        $date = new DateTime($values['birthday']);
        if ($date->diff($today)->y < 18) {
            $fail('You must be at least 18 years old to donate.');
        }
    });

[g3r0me]

Hi @jonwaldstein

It solves my birthday vérification.
I adapted the code to check the id number.

Thank you for your help.

[jonwaldstein]

Glad to hear, good luck!