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

Forms with randomised element ids don't support JS validation

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.7.1, 3.8
    • Fix Version/s: 3.7.3
    • Component/s: Forms Library
    • Labels:
    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE
    • Pull from Repository:
    • Pull 3.7 Branch:
    • Pull Master Branch:
      MDL-66106-master

      Description

      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

        Attachments

        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

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Nov/19

                  Time Tracking

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