Menu icon Foundation
Abide HTML5 Date Field and Chrome

Been using Foundation for over 2 years and I am a super-fan!

Application:
Foundation 5.0.3
Grails 2.3.5
Chrome 32.0.1700.102

I am using Abide to do date field validation. I have it working correctly if the field is of type text.

However, I would like to use the HTML5 date field in Chrome, but abide seems to run validation as soon as the user starts entering the year data and sets the field to be invalid (data-invalid class is set on the input) and will not go away even if the user finishes inputting the year. So, the event to validate is triggered prematurely and then not called when exiting the field.

Possibly, I could register another event to call abide again when it exits the field?

abidechromehtml5date

Been using Foundation for over 2 years and I am a super-fan!

Application:
Foundation 5.0.3
Grails 2.3.5
Chrome 32.0.1700.102

I am using Abide to do date field validation. I have it working correctly if the field is of type text.

However, I would like to use the HTML5 date field in Chrome, but abide seems to run validation as soon as the user starts entering the year data and sets the field to be invalid (data-invalid class is set on the input) and will not go away even if the user finishes inputting the year. So, the event to validate is triggered prematurely and then not called when exiting the field.

Possibly, I could register another event to call abide again when it exits the field?

Rafi Benkual over 5 years ago

Are you trying to delay the abide function until form submit?

Fredric Tillberg over 5 years ago

Looks like you're looking for "onblur" not "onkeyup" or "onkeydown".

Go thru' your Javascript and change indications of "onkeyup" to "onblur".

Or a text field with:
pattern="\d{4}-\d{2}-\d{2}"
Good: 1990-01-01
Bad: 1990-12-1
Bad: I haz no idea what to write here.

4 digits followed by a dash followed by 2 digits -- another slash and lastly: 2 more digits.

Gregory Dickson over 5 years ago

@Rafi: I might try to delay the abide function until form submit at some point but right now I am not.

I am using the unminified version of abide and started to add some debug statements to the function that runs the tests. I see it being called several times while the dates are being entered. For some reason it is not validating the year as ok when the field is exited and leaves the data-invalid class on the input div even after the field no longer has focus.

@Frederic: I will try to look at changing the event registration in the javascript and writing my own regex and see what happens.

Gregory Dickson over 5 years ago

Found an issue. The Chrome HTML5 date input fieid displays the date in this format: MM/DD/YYYY but the actual value is stored in the DOM as: value: "2002-11-02" so the regex is failing. I am updating the regex.

James Craine almost 4 years ago

For future people stuck on this problem. I managed to hot-fix this by adding a wildcard pattern on the date input.

<input class="ui-datepicker" name="date" type="date" pattern="/*">