Contrib.social

Min-date client-side validation with Cards

Open on Drupal.org →
Created on 19 February 2024, 4 months ago
Updated 5 April 2024, 3 months ago

Problem/Motivation

I have Client-side Validation installed and working as expected for most fields. I have a webform with multiple Cards. Required fields are enforced with client-side validation as expected.

The first Card contains two fields, one with a minimum date of +90 days and one with a with a minimum number of 100. Client-side validation works as expected for the number. If anything less than 100 is entered, a client-side error is displayed and you cannot navigate to the next page.

However, if you enter today's date, which is less than the minimum required, the minimum date is not validated/enforced before navigating to the next page. Instead, it is validated on submit and both a server-side AND (if you navigate to the first card) the client side error is displayed... but again not enforced until you submit.

Steps to reproduce

Below is the yaml for a simple the Webform that reproduces the issue:

card_1:
  '#type': card
  '#title': 'Card 1'
  min_date:
    '#type': date
    '#title': 'Min Date'
    '#date_date_min': '+90 days'
  min_number:
    '#type': number
    '#title': 'Min Number'
    '#min': 100
card_2:
  '#type': card
  '#title': 'Card 2'
  email:
    '#type': email
    '#title': Email
    '#required': true
🐛 Bug report
Status

Closed: won't fix

Version

6.2

Component

Code

Created by

🇺🇸United States sassafrass

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sassafrass
  • Comment 4 months ago →
    🇺🇸United States sassafrass

    In the file: webform_clientside_validation.ife.js, if I comment this code out, this works as expected.

      /**
   * Fix date/time min, max, and step validation issues.
   *
   * @type {Drupal~behavior}
   *
   * @see https://github.com/jquery-validation/jquery-validation/pull/2119/commits
   */
  /*Drupal.behaviors.webformClientSideValidationDateTimeFix = {
    attach: function (context) {
      $(context).find(':input[type="date"], :input[type="time"], :input[type="datetime"]')
        .removeAttr('step')
        .removeAttr('min')
        .removeAttr('max');
    }
  };*/
  • Comment 3 months ago →
    🇺🇸United States jrockowitz Brooklyn, NY

    I think we had to disable the clientside validation for dates because of https://github.com/jquery-validation/jquery-validation/pull/2119.

    It seems unlikely the issue will be fixed upstream.

    You should use the patch AS-IS.

  • Status changed to Closed: won't fix 3 months ago
  • Comment 3 months ago →
    🇺🇸United States jrockowitz Brooklyn, NY
contrib.social Blog FAQ Discussions
Production build 0.69.0 2024