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

Forms with randomised element ids don't support JS validation

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.7.3
    • 3.7.1, 3.8
    • Forms Library
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • MOODLE_37_STABLE
    • MDL-66106-master
    • Hide

      Test the fix for client-side validation in forms with randomised ids:

      1. Place 'testform.php' in your web root and access it
      2. Open browser dev tools -> console and make sure 'persist logs' is enabled (or equivalent). Leave the console open.
      3. Submit the form empty
      4. Verify you don't see any JS errors in the console
      5. Verify you see a form validation message 'This element is required'.
      6. Submit the form again, watching for a browser post. Verify nothing is posted.
      7. Reload the page to clear the validation error
      8. Click in the text field
      9. Tab away
      10. Verify you see a form validation message 'This element is required'.

       Regression test 1: Confirming this works for forms without randomised ids (the vast majority of cases in Moodle):

      1. Edit 'testform.php' and change:

        ['data-random-ids' => 1]

        to:

        ['data-random-ids' => 0]

        thus disabling the randomised ids.

      2. Access the form (or reload it if it's already open)
      3. Make sure 'persist logs' is enabled in your dev tools console (or its equivalent). Leave the console open.
      4. Submit the form empty
      5. Verify you don't see any JS errors in the console
      6. Verify you see a form validation message 'This element is required'.
      7. Submit the form again, watching for a browser post. Verify nothing is posted.
      8. Reload the page to clear the validation error
      9. Click in the text field
      10. Tab away
      11. Verify you see a form validation message 'This element is required'.

      Regression test 2: Confirming client side validation works when multiple forms are used and when randomisation of ids is enabled

      N.B. This test is based on the test in MDL-65217, but adds client side validation test steps.

      1. Place 'testmultipleforms.php' in your web root and access it
      2. Open browser dev tools -> console and make sure 'persist logs' is enabled (or equivalent). Leave the console open.
      3. Submit the first form empty
      4. Verify you don't see any JS errors in the console
      5. Verify you see a form validation message 'This element is required'.
      6. Submit the form again, watching for a browser post. Verify nothing is posted.
      7. Reload the page to clear the validation error
      8. Select a course from the first form's autocomplete (if you don't have any courses, create a few in your site and retry)
      9. Now, submit the second form
      10. Verify you see a form validation message 'This element is required' for the second form.
      11. Now, Verify you can now select THE SAME course from the second form's autocomplete.
      Show
      Test the fix for client-side validation in forms with randomised ids: Place 'testform.php' in your web root and access it Open browser dev tools -> console and make sure 'persist logs' is enabled (or equivalent). Leave the console open. Submit the form empty Verify you don't see any JS errors in the console Verify you see a form validation message 'This element is required'. Submit the form again, watching for a browser post. Verify nothing is posted. Reload the page to clear the validation error Click in the text field Tab away Verify you see a form validation message 'This element is required'.  Regression test 1: Confirming this works for forms without randomised ids (the vast majority of cases in Moodle): Edit 'testform.php' and change: ['data-random-ids' => 1] to: ['data-random-ids' => 0] thus disabling the randomised ids. Access the form (or reload it if it's already open) Make sure 'persist logs' is enabled in your dev tools console (or its equivalent). Leave the console open. Submit the form empty Verify you don't see any JS errors in the console Verify you see a form validation message 'This element is required'. Submit the form again, watching for a browser post. Verify nothing is posted. Reload the page to clear the validation error Click in the text field Tab away Verify you see a form validation message 'This element is required'. Regression test 2: Confirming client side validation works when multiple forms are used and when randomisation of ids is enabled N.B. This test is based on the test in MDL-65217 , but adds client side validation test steps. Place 'testmultipleforms.php' in your web root and access it Open browser dev tools -> console and make sure 'persist logs' is enabled (or equivalent). Leave the console open. Submit the first form empty Verify you don't see any JS errors in the console Verify you see a form validation message 'This element is required'. Submit the form again, watching for a browser post. Verify nothing is posted. Reload the page to clear the validation error Select a course from the first form's autocomplete (if you don't have any courses, create a few in your site and retry) Now, submit the second form Verify you see a form validation message 'This element is required' for the second form. Now, Verify you can now select THE SAME course from the second form's autocomplete.

      The ability to randomise element IDs was introduced, as an optional config for forms, in MDL-65217. That issue didn't make all required changes, resulting in JS errors when trying to validate a simple form with randomisation of element ids enabled. The result is that the form posts, when it should not.

      I'll include a test script demonstrating the problem, which can also be used for testing the fix.

      To replicate the bug:

      1. Place 'testform.php' in your webroot and access it
      2. Open browser dev tools -> console and make sure 'persist logs' is enabled (or equivalent). Leave the console open.
      3. Submit the form empty

      Expected: The form validation will catch the empty field and display a form error message without submitting anything (the field is set to use client validation after all)
      Actual: Notice a JS error and that the page posts the form

        1. MDL-66106_01.png
          MDL-66106_01.png
          125 kB
        2. MDL-66106_02.png
          MDL-66106_02.png
          164 kB
        3. MDL-66106_03.png
          MDL-66106_03.png
          154 kB
        4. testform.php
          0.9 kB
        5. testmultipleforms.php
          0.7 kB

            jaked Jake Dallimore
            jaked Jake Dallimore
            Andrew Lyons Andrew Lyons
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Jennifer Bauzon Jennifer Bauzon
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 hours, 20 minutes
                3h 20m

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