1

I want to leverage HTML5Constraint Validation for a registration form. I have a large number of inputs, and due to this, the submit button is not on screen at the same time as some of the required fields. I've discovered that in MS Edge, if you attempt to submit a form while an invalid input is not on screen, it will scroll to and focus the invalid input, but not display the validation message (error) bubble. It will do everything else that is expected of it except displaying the validation method. I've created a CodePen that demonstrates this:

http://codepen.io/TheHanna/pen/pRZPae

HTML

<form id="registrationForm">
  <input type="text" name="first" id="first" required>
  <input type="submit">
</form>

CSS

#first {
  display: block;
  margin-bottom: 100vh;
}

Expected behavior: Click the submit button; text input scrolls in to view, with a red outline, and a bubble of text saying "This is a required field". If you input into the field while it is invalid, the bubble disappears.

Actual behavior: Click the submit button; text input scrolls in to view, with a red outline. If you focus the input while it is invalid and in the viewport, it will show the message bubble. If you input into the field while it is invalid, the bubble disappears.

I'm doing some custom validations before submission, so I don't want to just style it differently, I want to indicate why the input is invalid in some way. I'd like to avoid adding more HTML to the page to display the error messages or using another library; the functionality is there. I haven't coded a solution yet, but my line of thinking is as follows:

  1. Capture the invalid event
  2. Check if the invalid input is in the viewport
  3. If so, proceed with event execution, if not, scroll it in to view, confirm it is in the viewport, then proceed with event execution

Has anyone encountered this issue? Is this expected behavior from Edge, or a known bug? Or is it unknown, and if so, where should I report it?

TylerH
  • 20,799
  • 66
  • 75
  • 101
TheHanna
  • 496
  • 5
  • 9
  • I’ve created a [workaround utilizing jQuery](http://codepen.io/TheHanna/pen/rjrEqR) that: Checks if the UA string contains “Edge”, enumerates the inputs of a given form, adds listeners for the invalid event to each input, sets an interval the repeatedly checks if the invalid input is a) focused and b) on screen, once both those conditions are met, the invalid input is blurred and refocused, triggering the display of the error message bubble in Edge. Obviously, there are issues with this approach, but it should cover a vast majority of use cases. – TheHanna Feb 08 '17 at 16:13
  • Decided to create a second version of the [workaround using plain Javascript](http://codepen.io/TheHanna/pen/pROYoe) – TheHanna Feb 08 '17 at 18:27

0 Answers0