Invalid Error in DMX Date Validator for HTML5 Date Input

#1

Wappler Version : 1.9.4
Operating System : Windows 10

Expected behavior

Setting MAX attribute of input should not allow dates after that and accept dates before that.

Actual behavior

Setting MAX attribute of input does not allow dates after that to be selected, but still fails the validation because of mismatch of date format.

How to reproduce

This is my normal input with type as DATE.
The MAX date constraint is set using a DateTime variable dateToday.

<input type="date" class="inputFloat form-control" id="dob" name="dob" autocomplete="off" data-rule-date="" required="" data-msg-required="DOB is required." dmx-bind:max="dateToday.datetime.addYears(-18).formatDate(&quot;yyyy-MM-dd&quot;)">

image

The date format of my system is dd-MMM-yyyy, which is what the browsers show, by default and cannot be changed.
But this is just the format in which the value is shown. Date inputs ALWAYS return the value in yyyy-MM-dd format.

image

The DMX validator is not checking with the actual date value for some reason.
Please check.

#2

@patrick: Any insights on this?

#3

The validator currently doesn’t have a rule for min/max on date fields. The min/max rule only compares numbers at this moment.

#4

So no workaround either?
I tried using normal MIN/MAX attributes, without using dmx-bind, but it still gets validated by DMX on runtime.

Any way to mark this field as ‘dont-validate’ for DMX?

#5

Should “type” not be text for the data picker?

#6

That is for Wappler’s built-in date picker control. We are using HTML5 date picker.

#7

You can try by overriding the default validator rule, add following javascript after the dmxValidator.js.

dmx.rules.max.validity = function(element, param) {
  if (element.type == 'date') {
    return element.value <= param;
  }

  return +element.value <= +param;
}
#8

Working great. Thanks a lot. :slight_smile:
A note: Had to add this in a document.ready function. Was getting max does-not-exist error when running directly, even if put after dmxValidator.js.

Hope to see this fixed permanently in the upcoming updates. :grin:

#9

@patrick Found these default functions in core.js
image

Its returning param and not +param. Which one is correct?

#10

At least one of the two or both must be converted to a number. When at least one is a number it will do a number compare, when both are string it will do a string compare.

5 < 15 (true)
5 < "15" (true)
"5" < "15" (false)

For the date field you can do a string compare of the value, while for numbers you need to convert the value first to an actual number to prevent a string compare and false result.