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

    • MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • 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.

    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

              timhunt Tim Hunt
              timhunt Tim Hunt
              Mark Johnson Mark Johnson
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Anna Carissa Sadia Anna Carissa Sadia
              David Woloszyn, Huong Nguyen, Jake Dallimore, Michael Hawkins, Stevani Andolo, Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May, David Woloszyn, Jake Dallimore, Michael Hawkins, Stevani Andolo
              Votes:
              2 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                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