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

Client-side JS validation does not work in modal forms

XMLWordPrintable

    • MOODLE_36_STABLE
    • MOODLE_37_STABLE
    • MDL-64573-master
    • 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 "
    • Workplace for Moodle 3.7

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

        1. screenshot-1.png
          screenshot-1.png
          257 kB

            damyon Damyon Wiese
            marina Marina Glancy
            Marina Glancy Marina Glancy
            Jun Pataleta Jun Pataleta
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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