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

    • 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.

      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.)

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

            timhunt Tim Hunt
            timhunt Tim Hunt
            Mark Johnson Mark Johnson
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            2 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.