MDL-70990 core_form: Replace FORM_FIELD_VALIDATION event

The legacy core/event::FORM_FIELD_VALIDATION event has been replaced with a
new core_form/events::formFieldValidationFailed native DOM event.

The new event can be listened to at any point in the DOM using the
following syntax:

```
import {eventTypes} from 'core_form/events';

document.addEventListener(eventTypes.formFieldValidationFailed, handler);
```

A backward-compatabibility layer is included to ensure that any legacy
jQuery event is still called with the same arguments.

This legacy bridge will be removed after Moodle 4.3.
This commit is contained in:
Andrew Nicols 2021-05-25 13:46:03 +08:00
parent acd9d9823b
commit 919db49a44
3 changed files with 32 additions and 2 deletions

View File

@ -1,2 +1,2 @@
define ("core_form/events",["exports","core/str","core/event_dispatcher","jquery","core/yui"],function(a,b,c,d,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.notifyFormSubmittedByJavascript=a.triggerUploadCompleted=a.triggerUploadStarted=a.eventTypes=a.types=void 0;d=g(d);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h;(0,b.get_string)("changesmadereallygoaway","moodle").then(function(a){h=a;return a}).catch();var i=function(a){if(a){a.returnValue=h}},j={uploadStarted:"core_form/uploadStarted",uploadCompleted:"core_form/uploadCompleted"};a.types=j;var k={formSubmittedByJavascript:"core_form/submittedByJavascript"};a.eventTypes=k;a.triggerUploadStarted=function triggerUploadStarted(a){window.addEventListener("beforeunload",i);var b=new CustomEvent(j.uploadStarted,{bubbles:!0,cancellable:!1}),c=document.getElementById(a);c.dispatchEvent(b);return b};a.triggerUploadCompleted=function triggerUploadCompleted(a){window.removeEventListener("beforeunload",i);var b=new CustomEvent(j.uploadCompleted,{bubbles:!0,cancellable:!1}),c=document.getElementById(a);c.dispatchEvent(b);return CustomEvent};a.notifyFormSubmittedByJavascript=function notifyFormSubmittedByJavascript(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:!1,d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1;if(b){window.skipClientValidation=!0}var e=(0,c.dispatchEvent)(k.formSubmittedByJavascript,{skipValidation:b,fallbackHandled:d},a);if(b){window.skipClientValidation=!1}return e};var l=!1;if(!l){f.default.use("event","moodle-core-event",function(){document.addEventListener(k.formSubmittedByJavascript,function(a){if(a.detail.fallbackHandled){return}if(a.skipValidation){window.skipClientValidation=!0}var b=f.default.one(a.target);b.fire(M.core.event.FORM_SUBMIT_AJAX,{currentTarget:b,fallbackHandled:!0});if(a.skipValidation){window.skipClientValidation=!1}})});document.addEventListener(k.formFieldValidationFailed,function(a){var b=d.default.Event("core_form-field-validation");(0,d.default)(a.target).trigger(b,a.detail.message)});l=!0}});
define ("core_form/events",["exports","core/str","core/event_dispatcher","jquery","core/yui"],function(a,b,c,d,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.notifyFieldValidationFailure=a.notifyFormSubmittedByJavascript=a.triggerUploadCompleted=a.triggerUploadStarted=a.eventTypes=a.types=void 0;d=g(d);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h;(0,b.get_string)("changesmadereallygoaway","moodle").then(function(a){h=a;return a}).catch();var i=function(a){if(a){a.returnValue=h}},j={uploadStarted:"core_form/uploadStarted",uploadCompleted:"core_form/uploadCompleted"};a.types=j;var k={formSubmittedByJavascript:"core_form/submittedByJavascript",formFieldValidationFailed:"core_form/fieldValidationFailed"};a.eventTypes=k;a.triggerUploadStarted=function triggerUploadStarted(a){window.addEventListener("beforeunload",i);var b=new CustomEvent(j.uploadStarted,{bubbles:!0,cancellable:!1}),c=document.getElementById(a);c.dispatchEvent(b);return b};a.triggerUploadCompleted=function triggerUploadCompleted(a){window.removeEventListener("beforeunload",i);var b=new CustomEvent(j.uploadCompleted,{bubbles:!0,cancellable:!1}),c=document.getElementById(a);c.dispatchEvent(b);return CustomEvent};a.notifyFormSubmittedByJavascript=function notifyFormSubmittedByJavascript(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:!1,d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1;if(b){window.skipClientValidation=!0}var e=(0,c.dispatchEvent)(k.formSubmittedByJavascript,{skipValidation:b,fallbackHandled:d},a);if(b){window.skipClientValidation=!1}return e};a.notifyFieldValidationFailure=function notifyFieldValidationFailure(a,b){return(0,c.dispatchEvent)(k.formFieldValidationFailed,{message:b},a,{cancelable:!0})};var l=!1;if(!l){f.default.use("event","moodle-core-event",function(){document.addEventListener(k.formSubmittedByJavascript,function(a){if(a.detail.fallbackHandled){return}if(a.skipValidation){window.skipClientValidation=!0}var b=f.default.one(a.target);b.fire(M.core.event.FORM_SUBMIT_AJAX,{currentTarget:b,fallbackHandled:!0});if(a.skipValidation){window.skipClientValidation=!1}})});document.addEventListener(k.formFieldValidationFailed,function(a){var b=d.default.Event("core_form-field-validation");(0,d.default)(a.target).trigger(b,a.detail.message)});l=!0}});
//# sourceMappingURL=events.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -68,6 +68,16 @@ export const eventTypes = {
* @property {Boolean} fallbackHandled Whether the legacy YUI event has been handled
*/
formSubmittedByJavascript: 'core_form/submittedByJavascript',
/**
* An event triggered upon form field validation failure.
*
* @event formFieldValidationFailed
* @type {CustomEvent}
* @property {HTMLElement} target The field that failed validation
* @property {String} message The message displayed upon failure
*/
formFieldValidationFailed: 'core_form/fieldValidationFailed',
};
/**
@ -143,6 +153,26 @@ export const notifyFormSubmittedByJavascript = (form, skipValidation = false, fa
return customEvent;
};
/**
* Trigger an event to indicate that a form field contained an error.
*
* @method notifyFieldValidationFailure
* @param {HTMLElement} field The field which failed validation
* @param {String} message The message displayed
* @returns {CustomEvent}
* @fires formFieldValidationFailed
*/
export const notifyFieldValidationFailure = (field, message) => dispatchEvent(
eventTypes.formFieldValidationFailed,
{
message,
},
field,
{
cancelable: true
}
);
let legacyEventsRegistered = false;
if (!legacyEventsRegistered) {
// The following event triggers are legacy and will be removed in the future.