Validation bubble display fails when input is not in the viewport

Fixed Issue #10832707

Details

Author
Brian H.
Created
Feb 7, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I made a StackOverflow post about this issue: Validation message not showing on invalid field if the field is off screen during form submission

I have also put together a Codepen demonstrating the issue: Form Validation issue - Edge (POC)

Every other major browser (including IE11!) displays the bubbles once an error field receives focus; however, in Edge, if the invalid input is not within the viewport when it is set as invalid, the focus event does not trigger the display of the error. This throws a major wrench in for anyone hoping to utilize Constraint Validation on a modern website/application. Even if this is “intended behavior” I would still argue that it is terrible UX design and should absolutely be reconsidered.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Status to “Confirmed”

    • I’ve created a workaround utilizing jQuery that:

      1. Checks if the UA string contains “Edge”
      2. Enumerates the inputs of a given form
      3. Adds listeners for the invalid event to each input
      4. Sets an interval the repeatedly checks if the invalid input is a) focused and b) on screen
      5. 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.

    • I’ve also rewritten the workaround in plain Javascript.

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To from “Brad E.” to “Steven K.”

      Changed Status from “Confirmed” to “Fixed”

    • Hello,

      Thank you for providing this information about the issue. Here is a sample we used to test the issue in Edge 14393: http://codepen.io/anon/pen/ryGLQa

      After thorough testing, we are unable to reproduce this problem in the public stable build of Edge, so this may have been fixed already. Please reopen this case if you have new information for us to consider.

      Best Wishes,
      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in