diff --git a/client/dist/js/userforms.js b/client/dist/js/userforms.js
index e35d3383a..452cc36b4 100644
--- a/client/dist/js/userforms.js
+++ b/client/dist/js/userforms.js
@@ -1 +1 @@
-!function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,r){"use strict";var n=r(3),i=r.n(n),o=r(2),s=r.n(o);i()(document).ready(function(t){function e(e){return this.$el=e instanceof t?e:t(e),this.$el.find("h4").text(s.a._t("UserForms.ERROR_CONTAINER_HEADER","Please correct the following errors and try again:")),this}function r(r){var n=this;return this.$el=r instanceof t?r:t(r),this.$elButton=t(".step-button-wrapper[data-for='"+this.$el.prop("id")+"']"),this.viewed=!1,this.valid=!1,this.id=null,this.hide(),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&(this.errorContainer=new e(this.$el.find(".error-container")),u.$el.on("userform.form.error",function(e,r){n.$el.is(":visible")&&t.each(r.errorList,function(e,r){n.errorContainer.updateErrorMessage(t(r.element),r.message)})}),u.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeErrorMessage(e)})),this.$elButton.on("userform.field.hide userform.field.show",function(){u.$el.trigger("userform.form.conditionalstep")}),this}function n(e){var r=this;return this.$el=e instanceof t?e:t(e),this.$buttons=this.$el.find(".step-button-jump"),this.$jsAlign=this.$el.find(".js-align"),this.$buttons.each(function(e,n){t(n).on("click",function(e){e.preventDefault();var n=parseInt(t(e.target).data("step"),10);r.$el.trigger("userform.progress.changestep",n)})}),u.$el.on("userform.form.changestep",function(t,e){r.update(e)}),u.$el.on("userform.form.conditionalstep",function(){var e=r.$buttons.filter(":visible");e.each(function(e,r){t(r).text(e+1)}),r.$el.find(".progress-bar").attr("aria-valuemax",e.length),r.$el.find(".total-step-number").text(e.length)}),this.$jsAlign.each(function(e,n){var i=t(n),o=100/(r.$jsAlign.length-1)*e,s=o+"%",a=i.innerWidth()/2*-1;i.css({left:s,marginLeft:a}),e===r.$jsAlign.length-1?i.css({marginLeft:2*a}):0===e&&i.css({marginLeft:0})}),this}function i(e){var r=this;return this.$el=e instanceof t?e:t(e),this.$prevButton=this.$el.find(".step-button-prev"),this.$nextButton=this.$el.find(".step-button-next"),this.$prevButton.parent().attr("aria-hidden",!1).show(),this.$nextButton.parent().attr("aria-hidden",!1).show(),this.$prevButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.prev")}),this.$nextButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.next")}),u.$el.on("userform.form.changestep userform.form.conditionalstep",function(){r.update()}),this}function o(r){var n=this;return this.$el=r instanceof t?r:t(r),this.steps=[],this.errorContainer=new e(this.$el.children(".error-container")),this.$el.on("userform.action.prev",function(){n.prevStep()}),this.$el.on("userform.action.next",function(){n.nextStep()}),t("#userform-progress").on("userform.progress.changestep",function(t,e){n.jumpToStep(e-1)}),this.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeStepLink(e)}),this.$el.validate(this.validationOptions),t(".optionset.requiredField input").each(function(e,r){t(r).rules("add",{required:!0})}),this}function a(a,p){var f=this,c=t(p);if(0!==c.length){l.ENABLE_LIVE_VALIDATION=void 0!==c.data("livevalidation"),l.DISPLAY_ERROR_MESSAGES_AT_TOP=void 0!==c.data("toperrors"),!1===l.ENABLE_LIVE_VALIDATION&&t.extend(o.prototype.validationOptions,{onfocusout:!1}),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&t.extend(o.prototype.validationOptions,{invalidHandler:function(t,e){c.trigger("userform.form.error",[e])},onfocusout:!1}),t(".userform-progress, .step-navigation").attr("aria-hidden",!1).show(),t.extend(r.prototype,d),t.extend(e.prototype,d),u=new o(c),l.HIDE_FIELD_LABELS&&c.find("label.left").each(function(){var e=t(f);t('[name="'+e.attr("for")+'"]').attr("placeholder",e.text()),e.remove()}),u.$el.find(".form-step").each(function(t,e){var n=new r(e);u.addStep(n)}),u.setCurrentStep(u.steps[0]),new n(t("#userform-progress")).update(0),new i(t("#step-navigation")).update(),t(document).on("click","input.text[data-showcalendar]",function(){var e=t(f);e.ssDatepicker(),e.data("datepicker")&&e.datepicker("show")}),setInterval(function(){t.ajax({url:"UserDefinedFormController/ping"})},18e4);var h=t("form.userform");void 0!==h.areYouSure&&h.areYouSure({message:s.a._t("UserForms.LEAVE_CONFIRMATION","You have unsaved changes!")})}}var u=null,l={},d={show:function(){this.$el.attr("aria-hidden",!1).show()},hide:function(){this.$el.attr("aria-hidden",!0).hide()}};e.prototype.hasErrors=function(){return this.$el.find(".error-list").children().length>0},e.prototype.removeErrorMessage=function(t){this.$el.find("#"+t+"-top-error").remove(),this.hasErrors()||this.hide()},e.prototype.addStepLink=function(e){var r=e.$el.attr("id")+"-error-link",n=this.$el.find("#"+r),i=e.$el.attr("id"),o=e.$el.data("title");n.length||(n=t('
'+o+""),n.on("click",function(t){t.preventDefault(),u.jumpToStep(e.id)}),this.$el.find(".error-list").append(n))},e.prototype.removeStepLink=function(e){var r=t("#"+e).closest(".form-step").attr("id");this.$el.find("#"+r+"-error-link").remove(),this.$el.find(".error-list").is(":empty")&&this.hide()},e.prototype.updateErrorMessage=function(e,r){var n=this,i=e.attr("id"),o="#"+i,s=i+"-top-error",a=t("#"+s),u=e.attr("aria-describedby");if(!r)return void a.addClass("fixed");a.removeClass("fixed"),this.show(),1===a.length?a.show().find("a").html(r):(e.closest(".field[id]").each(function(){o="#"+t(n).attr("id")}),a=t(""),a.attr("id",s).find("a").attr("href",location.pathname+location.search+o).html(r),this.$el.find("ul").append(a),u?u.match(new RegExp("\\b"+s+"\\b"))||(u+=" "+s):u=s,e.attr("aria-describedby",u))},r.prototype.conditionallyHidden=function(){return!this.$elButton.find("button").is(":visible")},n.prototype.update=function(e){var r=t(t(".form-step")[e]),n=0,i=e/(this.$buttons.length-1)*100;this.$buttons.each(function(r,i){return!(r>e||(t(i).is(":visible")&&(n+=1),0))}),this.$el.find(".current-step-number").each(function(e,r){t(r).text(n)}),this.$el.find("[aria-valuenow]").each(function(e,r){t(r).attr("aria-valuenow",n)}),this.$buttons.each(function(e,r){var i=t(r),o=i.parent();if(parseInt(i.data("step"),10)===n&&i.is(":visible"))return o.addClass("current viewed"),void i.removeAttr("disabled");o.removeClass("current")}),this.$el.siblings(".progress-title").text(r.data("title")),i=i?i+"%":"",this.$el.find(".progress-bar").width(i)},i.prototype.update=function(){var t=u.steps.length,e=u.currentStep?u.currentStep.id:0,r=null,n=null;for(this.$el.find(".step-button-prev")[0===e?"hide":"show"](),r=t-1;r>=0;r--)if(n=u.steps[r],!n.conditionallyHidden()){this.$el.find(".step-button-next")[e>=r?"hide":"show"](),this.$el.find(".btn-toolbar")[e>=r?"show":"hide"]();break}},o.prototype.validationOptions={ignore:":hidden,ul",errorClass:"error",errorElement:"span",errorPlacement:function(t,e){t.addClass("message"),e.is(":radio")||e.parents(".checkboxset").length>0?t.appendTo(e.closest(".middleColumn")):e.parents(".checkbox").length>0?t.appendTo(e.closest(".field")):t.insertAfter(e)},invalidHandler:function(t,e){setTimeout(function(){e.currentElements.filter(".error").first().focus()},0)},submitHandler:function(e){var r=!0;u.currentStep&&(u.currentStep.valid=t(e).valid()),t.each(u.steps,function(t,e){e.valid||e.conditionallyHidden()||(r=!1,u.errorContainer.addStepLink(e))}),r?(t(e).removeClass("dirty"),e.submit()):u.errorContainer.show()},success:function(e){var r=t(e).attr("id"),n=r.substr(0,r.indexOf("-error")).replace(/[\\[\\]]/,"");e.remove(),u.$el.trigger("userform.form.valid",[n])}},o.prototype.addStep=function(t){!t instanceof r||(t.id=this.steps.length,this.steps.push(t))},o.prototype.setCurrentStep=function(t){t instanceof r&&(this.currentStep=t,this.currentStep.show(),this.currentStep.viewed=!0,this.currentStep.$el.addClass("viewed"))},o.prototype.jumpToStep=function(t,e){var r=this.steps[t],n=!1,i=void 0===e||e;if(void 0!==r){if(r.conditionallyHidden())return void(i?this.jumpToStep(t+1):this.jumpToStep(t-1));n=this.$el.valid(),this.currentStep.valid=n,!1===n&&!1===r.viewed||(this.currentStep.hide(),this.setCurrentStep(r),this.$el.trigger("userform.form.changestep",[r.id]))}},o.prototype.nextStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)+1,!0)},o.prototype.prevStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)-1,!1)},t(".userform").each(a)})},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r(0)},function(t,e){t.exports=i18n},function(t,e){t.exports=jQuery}]);
\ No newline at end of file
+!function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,r){"use strict";var n=r(3),i=r.n(n),o=r(2),s=r.n(o),a=this;i()(document).ready(function(t){function e(e){return this.$el=e instanceof t?e:t(e),this.$el.find("h4").text(s.a._t("UserForms.ERROR_CONTAINER_HEADER","Please correct the following errors and try again:")),this}function r(r){var n=this;this.$el=r instanceof t?r:t(r);var i=this.$el.closest(".userform").data("inst");return this.$elButton=t(".step-button-wrapper[data-for='"+this.$el.prop("id")+"']"),this.viewed=!1,this.valid=!1,this.id=null,this.hide(),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&(this.errorContainer=new e(this.$el.find(".error-container")),i.$el.on("userform.form.error",function(e,r){n.$el.is(":visible")&&t.each(r.errorList,function(e,r){n.errorContainer.updateErrorMessage(t(r.element),r.message)})}),i.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeErrorMessage(e)})),this.$elButton.on("userform.field.hide userform.field.show",function(){i.$el.trigger("userform.form.conditionalstep")}),this}function n(e){var r=this;this.$el=e instanceof t?e:t(e),this.$buttons=this.$el.find(".step-button-jump"),this.$jsAlign=this.$el.find(".js-align");var n=this.$el.closest(".userform").data("inst");return this.$buttons.each(function(e,n){t(n).on("click",function(e){e.preventDefault();var n=parseInt(t(e.target).data("step"),10);r.$el.trigger("userform.progress.changestep",n)})}),n.$el.on("userform.form.changestep",function(t,e){r.update(e)}),n.$el.on("userform.form.conditionalstep",function(){var e=r.$buttons.filter(":visible");e.each(function(e,r){t(r).text(e+1)}),r.$el.find(".progress-bar").attr("aria-valuemax",e.length),r.$el.find(".total-step-number").text(e.length)}),this.$jsAlign.each(function(e,n){var i=t(n),o=100/(r.$jsAlign.length-1)*e,s=o+"%",a=i.innerWidth()/2*-1;i.css({left:s,marginLeft:a}),e===r.$jsAlign.length-1?i.css({marginLeft:2*a}):0===e&&i.css({marginLeft:0})}),this}function i(e){var r=this;return this.$el=e instanceof t?e:t(e),this.userformInstance=this.$el.closest(".userform").data("inst"),this.$prevButton=this.$el.find(".step-button-prev"),this.$nextButton=this.$el.find(".step-button-next"),this.$prevButton.parent().attr("aria-hidden",!1).show(),this.$nextButton.parent().attr("aria-hidden",!1).show(),this.$prevButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.prev")}),this.$nextButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.next")}),this.userformInstance.$el.on("userform.form.changestep userform.form.conditionalstep",function(){r.update()}),this}function o(r){var n=this;return this.$el=r instanceof t?r:t(r),this.steps=[],this.errorContainer=new e(this.$el.children(".error-container")),this.$el.on("userform.action.prev",function(){n.prevStep()}),this.$el.on("userform.action.next",function(){n.nextStep()}),this.$el.find(".userform-progress").on("userform.progress.changestep",function(t,e){n.jumpToStep(e-1)}),this.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeStepLink(e)}),this.$el.validate(this.validationOptions),this.$el.find(".optionset.requiredField input").each(function(e,r){t(r).rules("add",{required:!0})}),this}function u(a,u){var f=this,h=t(u);if(0!==h.length){l.ENABLE_LIVE_VALIDATION=void 0!==h.data("livevalidation"),l.DISPLAY_ERROR_MESSAGES_AT_TOP=void 0!==h.data("toperrors"),!1===l.ENABLE_LIVE_VALIDATION&&t.extend(o.prototype.validationOptions,{onfocusout:!1}),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&t.extend(o.prototype.validationOptions,{invalidHandler:function(t,e){h.trigger("userform.form.error",[e])},onfocusout:!1}),h.find(".userform-progress, .step-navigation").attr("aria-hidden",!1).show(),t.extend(r.prototype,d),t.extend(e.prototype,d);var p=new o(h);h.data("inst",p),l.HIDE_FIELD_LABELS&&h.find("label.left").each(function(){var e=t(f);t('[name="'+e.attr("for")+'"]').attr("placeholder",e.text()),e.remove()}),p.$el.find(".form-step").each(function(t,e){var n=new r(e);p.addStep(n)}),p.setCurrentStep(p.steps[0]);var c=h.find(".userform-progress");c.length&&new n(c).update(0);var v=h.find(".step-navigation");v.length&&new i(v).update(),t(document).on("click","input.text[data-showcalendar]",function(){var e=t(f);e.ssDatepicker(),e.data("datepicker")&&e.datepicker("show")}),setInterval(function(){t.ajax({url:"UserDefinedFormController/ping"})},18e4),void 0!==h.areYouSure&&h.areYouSure({message:s.a._t("UserForms.LEAVE_CONFIRMATION","You have unsaved changes!")})}}var l={},d={show:function(){this.$el.attr("aria-hidden",!1).show()},hide:function(){this.$el.attr("aria-hidden",!0).hide()}};e.prototype.hasErrors=function(){return this.$el.find(".error-list").children().length>0},e.prototype.removeErrorMessage=function(t){this.$el.find("#"+t+"-top-error").remove(),this.hasErrors()||this.hide()},e.prototype.addStepLink=function(e){var r=this.$el.closest(".userform").data("inst"),n=e.$el.attr("id")+"-error-link",i=this.$el.find("#"+n),o=e.$el.attr("id"),s=e.$el.data("title");i.length||(i=t(''+s+""),i.on("click",function(t){t.preventDefault(),r.jumpToStep(e.id)}),this.$el.find(".error-list").append(i))},e.prototype.removeStepLink=function(e){var r=t("#"+e).closest(".form-step").attr("id");this.$el.find("#"+r+"-error-link").remove(),this.$el.find(".error-list").is(":empty")&&this.hide()},e.prototype.updateErrorMessage=function(e,r){var n=this,i=e.attr("id"),o="#"+i,s=i+"-top-error",a=t("#"+s),u=e.attr("aria-describedby");if(!r)return void a.addClass("fixed");a.removeClass("fixed"),this.show(),1===a.length?a.show().find("a").html(r):(e.closest(".field[id]").each(function(){o="#"+t(n).attr("id")}),a=t(""),a.attr("id",s).find("a").attr("href",location.pathname+location.search+o).html(r),this.$el.find("ul").append(a),u?u.match(new RegExp("\\b"+s+"\\b"))||(u+=" "+s):u=s,e.attr("aria-describedby",u))},r.prototype.conditionallyHidden=function(){return!this.$elButton.find("button").is(":visible")},n.prototype.update=function(e){var r=t(this.$el.find(".form-step")[e]),n=0,i=e/(this.$buttons.length-1)*100;this.$buttons.each(function(r,i){return!(r>e||(t(i).is(":visible")&&(n+=1),0))}),this.$el.find(".current-step-number").each(function(e,r){t(r).text(n)}),this.$el.find("[aria-valuenow]").each(function(e,r){t(r).attr("aria-valuenow",n)}),this.$buttons.each(function(e,r){var i=t(r),o=i.parent();if(parseInt(i.data("step"),10)===n&&i.is(":visible"))return o.addClass("current viewed"),void i.removeAttr("disabled");o.removeClass("current")}),this.$el.siblings(".progress-title").text(r.data("title")),i=i?i+"%":"",this.$el.find(".progress-bar").width(i)},i.prototype.update=function(){var t=this.userformInstance.steps.length,e=this.userformInstance.currentStep?this.userformInstance.currentStep.id:0,r=null,n=null;for(this.$el.find(".step-button-prev")[0===e?"hide":"show"](),r=t-1;r>=0;r--)if(n=this.userformInstance.steps[r],!n.conditionallyHidden()){this.$el.find(".step-button-next")[e>=r?"hide":"show"](),this.$el.find(".btn-toolbar")[e>=r?"show":"hide"]();break}},o.prototype.validationOptions={ignore:":hidden,ul",errorClass:"error",errorElement:"span",errorPlacement:function(t,e){t.addClass("message"),e.is(":radio")||e.parents(".checkboxset").length>0?t.appendTo(e.closest(".middleColumn")):e.parents(".checkbox").length>0?t.appendTo(e.closest(".field")):t.insertAfter(e)},invalidHandler:function(t,e){setTimeout(function(){e.currentElements.filter(".error").first().focus()},0)},submitHandler:function(e){var r=!0,n=a.$el.data("inst");n.currentStep&&(n.currentStep.valid=t(e).valid()),t.each(n.steps,function(t,e){e.valid||e.conditionallyHidden()||(r=!1,n.errorContainer.addStepLink(e))}),r?(t(e).removeClass("dirty"),e.submit()):n.errorContainer.show()},success:function(e){var r=t(e).closest(".userform").data("inst"),n=t(e).attr("id"),i=n.substr(0,n.indexOf("-error")).replace(/[\\[\\]]/,"");e.remove(),r.$el.trigger("userform.form.valid",[i])}},o.prototype.addStep=function(t){t instanceof r&&(t.id=this.steps.length,this.steps.push(t))},o.prototype.setCurrentStep=function(t){t instanceof r&&(this.currentStep=t,this.currentStep.show(),this.currentStep.viewed=!0,this.currentStep.$el.addClass("viewed"))},o.prototype.jumpToStep=function(t,e){var r=this.steps[t],n=!1,i=void 0===e||e;if(void 0!==r){if(r.conditionallyHidden())return void(i?this.jumpToStep(t+1):this.jumpToStep(t-1));n=this.$el.valid(),this.currentStep.valid=n,!1===n&&!1===r.viewed||(this.currentStep.hide(),this.setCurrentStep(r),this.$el.trigger("userform.form.changestep",[r.id]))}},o.prototype.nextStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)+1,!0)},o.prototype.prevStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)-1,!1)},t(".userform").each(u)})},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r(0)},function(t,e){t.exports=i18n},function(t,e){t.exports=jQuery}]);
\ No newline at end of file
diff --git a/client/src/bundles/UserForms.js b/client/src/bundles/UserForms.js
index e9a2f4e34..d0949aabc 100644
--- a/client/src/bundles/UserForms.js
+++ b/client/src/bundles/UserForms.js
@@ -6,9 +6,6 @@ import jQuery from 'jquery';
import i18n from 'i18n';
jQuery(document).ready(($) => {
- // A reference to the UserForm instance.
- let userform = null;
-
// Settings that come from the CMS.
const CONSTANTS = {};
@@ -75,6 +72,7 @@ jQuery(document).ready(($) => {
* @desc Adds a link to a form step as an error message.
*/
ErrorContainer.prototype.addStepLink = function addStepLink(step) {
+ const userform = this.$el.closest('.userform').data('inst');
const itemID = `${step.$el.attr('id')}-error-link`;
let $itemElement = this.$el.find(`#${itemID}`);
const stepID = step.$el.attr('id');
@@ -179,6 +177,8 @@ jQuery(document).ready(($) => {
this.$el = element instanceof $ ? element : $(element);
+ const userform = this.$el.closest('.userform').data('inst');
+
// Find button for this step
this.$elButton = $(`.step-button-wrapper[data-for='${this.$el.prop('id')}']`);
@@ -249,6 +249,7 @@ jQuery(document).ready(($) => {
this.$el = element instanceof $ ? element : $(element);
this.$buttons = this.$el.find('.step-button-jump');
this.$jsAlign = this.$el.find('.js-align');
+ const userform = this.$el.closest('.userform').data('inst');
// Update the progress bar when 'step' buttons are clicked.
this.$buttons.each((i, stepButton) => {
@@ -311,7 +312,7 @@ jQuery(document).ready(($) => {
* @desc Update the progress element to show a new step.
*/
ProgressBar.prototype.update = function update(stepID) {
- const $newStepElement = $($('.form-step')[stepID]);
+ const $newStepElement = $(this.$el.find('.form-step')[stepID]);
let stepNumber = 0;
let barWidth = stepID / (this.$buttons.length - 1) * 100;
@@ -371,6 +372,7 @@ jQuery(document).ready(($) => {
const self = this;
this.$el = element instanceof $ ? element : $(element);
+ this.userformInstance = this.$el.closest('.userform').data('inst');
this.$prevButton = this.$el.find('.step-button-prev');
this.$nextButton = this.$el.find('.step-button-next');
@@ -391,7 +393,7 @@ jQuery(document).ready(($) => {
// Listen for changes to the current form step, or conditional pages,
// so we can show hide buttons appropriately.
- userform.$el.on('userform.form.changestep userform.form.conditionalstep', () => {
+ this.userformInstance.$el.on('userform.form.changestep userform.form.conditionalstep', () => {
self.update();
});
@@ -404,8 +406,8 @@ jQuery(document).ready(($) => {
* @desc Updates the form actions element to reflect the current state of the page.
*/
FormActions.prototype.update = function update() {
- const numberOfSteps = userform.steps.length;
- const stepID = userform.currentStep ? userform.currentStep.id : 0;
+ const numberOfSteps = this.userformInstance.steps.length;
+ const stepID = this.userformInstance.currentStep ? this.userformInstance.currentStep.id : 0;
let i = null;
let lastStep = null;
@@ -414,7 +416,7 @@ jQuery(document).ready(($) => {
// Find last step, skipping hidden ones
for (i = numberOfSteps - 1; i >= 0; i--) {
- lastStep = userform.steps[i];
+ lastStep = this.userformInstance.steps[i];
// Skip if step is hidden
if (lastStep.conditionallyHidden()) {
@@ -457,7 +459,7 @@ jQuery(document).ready(($) => {
});
// Listen for events triggered by the progress bar.
- $('#userform-progress').on('userform.progress.changestep', (e, stepNumber) => {
+ this.$el.find('.userform-progress').on('userform.progress.changestep', (e, stepNumber) => {
self.jumpToStep(stepNumber - 1);
});
@@ -469,7 +471,7 @@ jQuery(document).ready(($) => {
this.$el.validate(this.validationOptions);
// Ensure checkbox groups are validated correctly
- $('.optionset.requiredField input').each((a, field) => {
+ this.$el.find('.optionset.requiredField input').each((a, field) => {
$(field).rules('add', {
required: true,
});
@@ -507,6 +509,7 @@ jQuery(document).ready(($) => {
// So when the final step is submitted we have to also check all previous steps are valid.
submitHandler: (form) => {
let isValid = true;
+ const userform = this.$el.data('inst');
// Validate the current step
if (userform.currentStep) {
@@ -532,6 +535,7 @@ jQuery(document).ready(($) => {
},
// When a field becomes valid.
success: (error) => {
+ const userform = $(error).closest('.userform').data('inst');
const errorId = $(error).attr('id');
const fieldId = errorId.substr(0, errorId.indexOf('-error')).replace(/[\\[\\]]/, '');
@@ -541,7 +545,7 @@ jQuery(document).ready(($) => {
error.remove();
- // Pass the field's ID with the event.
+ // Pass the field's ID with the event
userform.$el.trigger('userform.form.valid', [fieldId]);
},
};
@@ -553,7 +557,7 @@ jQuery(document).ready(($) => {
*/
UserForm.prototype.addStep = function addStep(step) {
// Make sure we're dealing with a form step.
- if (!step instanceof FormStep) {
+ if (!(step instanceof FormStep)) {
return;
}
@@ -680,13 +684,14 @@ jQuery(document).ready(($) => {
}
// Display all the things that are hidden when JavaScript is disabled.
- $('.userform-progress, .step-navigation').attr('aria-hidden', false).show();
+ $userform.find('.userform-progress, .step-navigation').attr('aria-hidden', false).show();
// Extend classes with common functionality.
$.extend(FormStep.prototype, commonMixin);
$.extend(ErrorContainer.prototype, commonMixin);
- userform = new UserForm($userform);
+ const userform = new UserForm($userform);
+ $userform.data('inst', userform);
// Conditionally hide field labels and use HTML5 placeholder instead.
if (CONSTANTS.HIDE_FIELD_LABELS) {
@@ -708,11 +713,17 @@ jQuery(document).ready(($) => {
userform.setCurrentStep(userform.steps[0]);
// Initialise actions and progressbar
- const progressBar = new ProgressBar($('#userform-progress'));
- progressBar.update(0);
+ const $progressEl = $userform.find('.userform-progress');
+ if ($progressEl.length) {
+ const progressBar = new ProgressBar($progressEl);
+ progressBar.update(0);
+ }
- const formActions = new FormActions($('#step-navigation'));
- formActions.update();
+ const $formActionsEl = $userform.find('.step-navigation');
+ if ($formActionsEl.length) {
+ const formActions = new FormActions($formActionsEl);
+ formActions.update();
+ }
// Enable jQuery UI datepickers
$(document).on('click', 'input.text[data-showcalendar]', () => {
@@ -731,9 +742,8 @@ jQuery(document).ready(($) => {
}, 180 * 1000);
// Bind a confirmation message when navigating away from a partially completed form.
- const form = $('form.userform');
- if (typeof form.areYouSure !== 'undefined') {
- form.areYouSure({
+ if (typeof $userform.areYouSure !== 'undefined') {
+ $userform.areYouSure({
message: i18n._t('UserForms.LEAVE_CONFIRMATION', 'You have unsaved changes!'),
});
}