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

Client-side JS validation does not work in modal forms

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      Before the test:
      1. Enable autosave in the calendar form by changing \core_calendar\local\event\forms\create::build_editor_options()' "autosave" return parameter in calendar/classes/local/event/forms/create.php to "true".
      Test 1 - Atto
      1. Edit your editor preferences so Atto HTML Editor is your text editor
      2. Open calendar
      3. Open Network tab in the developer tools in the browser
      4. Press button "New event"
      5. On the browser's developer tools, clear the output of the Network tab for easier verification of the next steps.
      6. Submit the form without an event name
      7. Make sure the error is displayed but the request is not sent to the server (except for a request sent to autosave-ajax.php)
      8. Submit the form with an event name
      9. Make sure the form is submitted and the event is created
      10. Open calendar
      11. Open Network tab in the dev tools in the browser
      12. Press button "New event"
      13. Click "Show more" and add some text to the editor
      14. Leave the browser window open until you see that the "Autosave" request is done
      15. Close the browser window
      16. Open the same page again
      17. Press "New event", make sure the description is populated with the autosaved value
      18. Fill the name of the event and save the form
      19. Open the "New event" form again
      20. Make sure that the description is empty in the form
      Test 2 - TinyMCE
      1. Edit your editor preferences so TinyMCE HTML Editor is your text editor.
      2. Open calendar
      3. Press button "New event"
      4. Add a name and description for the event.
      5. Submit the form
      6. Make sure the form is submitted and the event is created
      7. Verify the description matches what was entered and is not empty.

      After the test, make sure to revert your changes in "calendar/classes/local/event/forms/create.php". e.g. "git reset --hard origin/master"

      Show
      Before the test: Enable autosave in the calendar form by changing \core_calendar\local\event\forms\create::build_editor_options() ' " autosave " return parameter in calendar/classes/local/event/forms/create.php to " true ". Test 1 - Atto Edit your editor preferences so Atto HTML Editor is your text editor Open calendar Open Network tab in the developer tools in the browser Press button "New event" On the browser's developer tools, clear the output of the Network tab for easier verification of the next steps. Submit the form without an event name Make sure the error is displayed but the request is not sent to the server (except for a request sent to autosave-ajax.php) Submit the form with an event name Make sure the form is submitted and the event is created Open calendar Open Network tab in the dev tools in the browser Press button "New event" Click "Show more" and add some text to the editor Leave the browser window open until you see that the "Autosave" request is done Close the browser window Open the same page again Press "New event", make sure the description is populated with the autosaved value Fill the name of the event and save the form Open the "New event" form again Make sure that the description is empty in the form Test 2 - TinyMCE Edit your editor preferences so TinyMCE HTML Editor is your text editor. Open calendar Press button "New event" Add a name and description for the event. Submit the form Make sure the form is submitted and the event is created Verify the description matches what was entered and is not empty. After the test, make sure to revert your changes in " calendar/classes/local/event/forms/create.php ". e.g. " git reset --hard origin/master "
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-64573-master
    • Sprint:
      Workplace for Moodle 3.7

      Description

      When we display forms inside modal dialogues we intercept form submission and substitute it with our own callback. As a result client-side form validation is never executed. It is not obvious but if you look at the network inspector you can see that the request is sent to the server and the form errors are returned from the server.

      I have also noticed code like this in the modal forms:
      https://github.com/moodle/moodle/blob/master/calendar/amd/src/modal_event_form.js#L463-L481
      This does not really make much sense. We never execute other listeners for the form submission. This code can be replaced with the following without any changes in functionality:

              // When the user clicks the save button save the form.
              this.getModal().on(CustomEvents.events.activate, SELECTORS.SAVE_BUTTON, function() {
                  this.save();
              }.bind(this));
      

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  20/May/19

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 4 hours, 30 minutes
                  4d 4h 30m