guillaumepotier / Parsley.js

Validate your forms, frontend, without writing a single line of javascript

Home Page:http://parsleyjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mobile Date Validation Not Working

fazissa opened this issue · comments

What kind of issue is this? (put 'x' between the square brackets)


Hello,

I am using Flatpickr as my date UI. Everything is working fine on a desktop application, however, when I test my site on a mobile browser I get a bug.

Steps

  1. Pick a date
  2. Hit the submit form; this validates all inputs
  3. The date input html is as follows:

<input class="input datepicker-dob" placeholder="Select Date" type="text" name="dateOfBirth" data-parsley-date data-parsley-validate-if-empty data-parsley-required="true">

"datepicker-dob" is simply the class to which Flatpickr attaches. I get the below error even if I remove the data-parsley-* attributes.

IMG_3100

Flatpickr is set up as below:

     const currDate = new Date();
    const newdate = new Date(currDate);
    newdate.setYear(currDate.getFullYear() - 17);

    flatpickr(".datepicker-dob", {
        dateFormat: "d-M-Y",
        maxDate: newdate
    });

This error goes away when I request the mobile site, so I am not sure what is going on here.

I have recreated this issue on safari, and chrome, both on an iphone device.

Any ideas on what could cause this issue?

Thanks

I think I understand what is going on;

a max="2002-08-03" gets added which conflicts with the date format I specify for Flatpickr. Seems like I will have to use something like moment.js to validate dates.

Edit:

Looking further into the issue, it seems Parsley is not comparing the dates properly. If I simply add max="2002-08-03" then the validation passes even if I enter a date beyond the maximum.