Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-67876

Forms with client-side validation should always scroll to the invalid element when you try to submit

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Go to any moderately complicated form. E.g. start creating a true-false question in the question bank.
      2. Just scroll to the bottom, and click the Save button.
      3. Note that you are automatically scrolled up to the top becuse the " - You must supply a value here." message has just been added to the question name and question text.
      4. Now, scroll down to the bottom, and click the button again.
      5. Verify that you are taken to the first invalid field (question name) - that means both browser window scroll and focus.
      6. Press tab a few times.
      7. Verify that you can move keyboard focus to below question text.
      Show
      Go to any moderately complicated form. E.g. start creating a true-false question in the question bank. Just scroll to the bottom, and click the Save button. Note that you are automatically scrolled up to the top becuse the " - You must supply a value here." message has just been added to the question name and question text. Now, scroll down to the bottom, and click the button again. Verify that you are taken to the first invalid field (question name) - that means both browser window scroll and focus. Press tab a few times. Verify that you can move keyboard focus to below question text.
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Pull 3.7 Branch:
    • Pull 3.8 Branch:
    • Pull Master Branch:

      Description

      Steps to reproduce:

      1. Go to any moderately compliacated form. E.g. start creating a true-false question in the question bank.
      2. Just scroll to the bottom, and click the Save button.
      3. Note that you are automatically scrolled up to the top becuse the " - You must supply a value here." message has just been added to the question name and question text.
      4. Now, scroll down to the bottom, and click the button again.

      Actual result: nothing happens. User is confused.

      Expected result: you should be scrolled to the validation error.

      (Note, the error is only focussed when it is first added so that, if you are navigating around the form with the tab key, you don't get stuck when you want to leave a field empty and return to it later.)

        Attachments

        1. MDL-67876_Step3.jpg
          MDL-67876_Step3.jpg
          15 kB
        2. MDL-67876_Step5.mp4
          1.50 MB
        3. MDL-67876_Step7.mp4
          777 kB

          Issue Links

            Activity

              People

              Assignee:
              timhunt Tim Hunt
              Reporter:
              timhunt Tim Hunt
              Peer reviewer:
              Mark Johnson
              Integrator:
              Eloy Lafuente (stronk7)
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Barbara Ramiro, Bas Brands
              Votes:
              2 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Mar/20

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 hour, 15 minutes
                  1h 15m