Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Firefox: 'onblur' validation incorrectly marks date field invalid #76

Open
msssk opened this issue May 11, 2018 · 3 comments
Open

Firefox: 'onblur' validation incorrectly marks date field invalid #76

msssk opened this issue May 11, 2018 · 3 comments

Comments

@msssk
Copy link

msssk commented May 11, 2018

Tested on Windows 10

  • Chrome 66 (works)
  • Edge 41 / EdgeHTML 16 (works)
  • Firefox 60 (broken)

If you fill out a required date field and click or tab away the field is marked as invalid. Validation works correctly when changing revalidate to 'hybrid'.

Test case:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>hyperform date test</title>
		<style>
			.hf-invalid {
				border: 2px solid red;
			}
		</style>
	</head>

	<body>
		<form>
			<input name="dateField" required type="date">
		</form>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperform/0.9.11/hyperform.js"></script>
		<script>
			hyperform(document.body.querySelector('form'), {
				revalidate: 'onblur',
			});
		</script>
	</body>
</html>
@Boldewyn
Copy link
Contributor

Thank you for the report!

Unfortunately, with my Firefox 60 on Linux and a Browserstack Firefox 60 beta on Win10 I can’t reproduce your test case (verbatim copied for Linux, on https://jsbin.com/qemacer/1/edit?html,output for Windows). Hyperform on Firefox marks the field as valid in both cases.

type=date is a nasty beast, though. I’ve got #49 open for ages, because I’ve got no idea, how to tackle that when the browser itself jumps in.

@msssk
Copy link
Author

msssk commented May 17, 2018

Strange that the problem is not consistent! I wondered if it had anything to do with locale, but I can't seem to get Firefox to change from "mm/dd/yyyy" for date formatting.

I'm on Firefox 60.0.1 (64-bit) on Windows 10 and I still get the problem in your jsbin. It's only on entering the date when the field is empty. When I first enter a date validation fails, if I focus then blur the field after that validation succeeds (whether I edit the date or leave it the same). If I clear the field and enter a valid date again, validation fails on blur.

@Boldewyn
Copy link
Contributor

Locale is a good point! I’ll try to reproduce the error with another set-up, but that might take some time (currently much to do getting EU GDPR requirements set up).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Boldewyn @msssk