@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/components/form-validator/form-validator.js

@@ -1,156 +1,399 @@
-MOJFrontend.FormValidator = function(form, options) {
-  this.form = form;
-  this.errors = [];
-  this.validators = [];
-  $(this.form).on('submit', $.proxy(this, 'onSubmit'));
-  this.summary = (options && options.summary) ? $(options.summary) : $('.govuk-error-summary');
-  this.originalTitle = document.title;
-};
-
-MOJFrontend.FormValidator.entityMap = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&#39;',
-  '/': '&#x2F;',
-  '`': '&#x60;',
-  '=': '&#x3D;'
-};
-
-MOJFrontend.FormValidator.prototype.escapeHtml = function(string) {
-  return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) {
-    return MOJFrontend.FormValidator.entityMap[s];
-  });
-};
-
-MOJFrontend.FormValidator.prototype.resetTitle = function() {
-  document.title = this.originalTitle;
-};
-
-MOJFrontend.FormValidator.prototype.updateTitle = function() {
-  document.title = "" + this.errors.length + " errors - " + document.title;
-};
-
-MOJFrontend.FormValidator.prototype.showSummary = function () {
-  this.summary.html(this.getSummaryHtml());
-  this.summary.removeClass('moj-hidden');
-  this.summary.attr('aria-labelledby', 'errorSummary-heading');
-  this.summary.focus();
-};
-
-MOJFrontend.FormValidator.prototype.getSummaryHtml = function() {
-  var html = '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
-  html += '<div class="govuk-error-summary__body">';
-  html += '<ul class="govuk-list govuk-error-summary__list">';
-  for (var i = 0, j = this.errors.length; i < j; i++) {
-    var error = this.errors[i];
-    html += '<li>';
-    html +=   '<a href="#' + this.escapeHtml(error.fieldName) + '">';
-    html +=     this.escapeHtml(error.message);
-    html +=   '</a>';
-    html += '</li>';
-  }
-  html += '</ul>';
-  html += '</div>';
-  return html;
-};
-
-MOJFrontend.FormValidator.prototype.hideSummary = function() {
-  this.summary.addClass('moj-hidden');
-  this.summary.removeAttr('aria-labelledby');
-};
-
-MOJFrontend.FormValidator.prototype.onSubmit = function (e) {
-  this.removeInlineErrors();
-  this.hideSummary();
-  this.resetTitle();
-  if(!this.validate()) {
-    e.preventDefault();
-    this.updateTitle();
-    this.showSummary();
-    this.showInlineErrors();
-  }
-};
-
-MOJFrontend.FormValidator.prototype.showInlineErrors = function() {
-  for (var i = 0, j = this.errors.length; i < j; i++) {
-    this.showInlineError(this.errors[i]);
-  }
-};
-
-MOJFrontend.FormValidator.prototype.showInlineError = function (error) {
-  var errorSpanId = error.fieldName + '-error';
-  var errorSpan = '<span class="govuk-error-message" id="'+ errorSpanId +'">'+this.escapeHtml(error.message)+'</span>';
-  var control = $("#" + error.fieldName);
-  var fieldContainer = control.parents(".govuk-form-group");
-  var label = fieldContainer.find('label');
-  var legend = fieldContainer.find("legend");
-  var fieldset = fieldContainer.find("fieldset");
-  fieldContainer.addClass('govuk-form-group--error');
-  if(legend.length) {
-    legend.after(errorSpan);
-    fieldContainer.attr('aria-invalid', 'true');
-    MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId);
-  } else {
-    label.after(errorSpan);
-    control.attr('aria-invalid', 'true');
-    MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId);
-  }
-};
-
-MOJFrontend.FormValidator.prototype.removeInlineErrors = function() {
-  var error;
-  var i;
-  for (var i = 0; i < this.errors.length; i++) {
-    this.removeInlineError(this.errors[i]);
-  }
-};
-
-MOJFrontend.FormValidator.prototype.removeInlineError = function(error) {
-  var control = $("#" + error.fieldName);
-  var fieldContainer = control.parents(".govuk-form-group");
-  fieldContainer.find('.govuk-error-message').remove();
-  fieldContainer.removeClass('govuk-form-group--error');
-  fieldContainer.find("[aria-invalid]").attr('aria-invalid', 'false');
-  var errorSpanId = error.fieldName + '-error';
-  MOJFrontend.removeAttributeValue(fieldContainer.find('[aria-describedby]')[0], 'aria-describedby', errorSpanId);
-};
-
-MOJFrontend.FormValidator.prototype.addValidator = function(fieldName, rules) {
-  this.validators.push({
-    fieldName: fieldName,
-    rules: rules,
-    field: this.form.elements[fieldName]
-  });
-};
-
-MOJFrontend.FormValidator.prototype.validate = function() {
-  this.errors = [];
-  var validator = null,
-    validatorReturnValue = true,
-    i,
-    j;
-  for (i = 0; i < this.validators.length; i++) {
-    validator = this.validators[i];
-    for (j = 0; j < validator.rules.length; j++) {
-      validatorReturnValue = validator.rules[j].method(validator.field,
-        validator.rules[j].params);
-
-      if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
-        this.errors.push({
-          fieldName: validator.fieldName,
-          message: validator.rules[j].message
-        });
-        break;
-      } else if(typeof validatorReturnValue === 'string') {
-        this.errors.push({
-          fieldName: validatorReturnValue,
-          message: validator.rules[j].message
-        });
-        break;
-      }
-    }
-  }
-  return this.errors.length === 0;
-};
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
+})(this, (function () { 'use strict';
+
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
+	var _global_window_jQuery = window.jQuery;
+
+	var helpers;
+	var hasRequiredHelpers;
+
+	function requireHelpers () {
+		if (hasRequiredHelpers) return helpers;
+		hasRequiredHelpers = 1;
+		function removeAttributeValue(el, attr, value) {
+		  let re, m;
+		  if (el.getAttribute(attr)) {
+		    if (el.getAttribute(attr) === value) {
+		      el.removeAttribute(attr);
+		    } else {
+		      re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+		      m = el.getAttribute(attr).match(re);
+		      if (m && m.length === 3) {
+		        el.setAttribute(
+		          attr,
+		          el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : '')
+		        );
+		      }
+		    }
+		  }
+		}
+
+		function addAttributeValue(el, attr, value) {
+		  let re;
+		  if (!el.getAttribute(attr)) {
+		    el.setAttribute(attr, value);
+		  } else {
+		    re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+		    if (!re.test(el.getAttribute(attr))) {
+		      el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`);
+		    }
+		  }
+		}
+
+		function dragAndDropSupported() {
+		  const div = document.createElement('div');
+		  return typeof div.ondrop !== 'undefined'
+		}
+
+		function formDataSupported() {
+		  return typeof FormData === 'function'
+		}
+
+		function fileApiSupported() {
+		  const input = document.createElement('input');
+		  input.type = 'file';
+		  return typeof input.files !== 'undefined'
+		}
+
+		function nodeListForEach(nodes, callback) {
+		  if (window.NodeList.prototype.forEach) {
+		    return nodes.forEach(callback)
+		  }
+		  for (let i = 0; i < nodes.length; i++) {
+		    callback.call(window, nodes[i], i, nodes);
+		  }
+		}
+
+		/**
+		 * Find an elements next sibling
+		 *
+		 * Utility function to find an elements next sibling matching the provided
+		 * selector.
+		 *
+		 * @param {HTMLElement} $element - Element to find siblings for
+		 * @param {string} selector - selector for required sibling
+		 */
+		function getNextSibling($element, selector) {
+		  if (!$element) return
+		  // Get the next sibling element
+		  let $sibling = $element.nextElementSibling;
+
+		  // If there's no selector, return the first sibling
+		  if (!selector) return $sibling
+
+		  // If the sibling matches our selector, use it
+		  // If not, jump to the next sibling and continue the loop
+		  while ($sibling) {
+		    if ($sibling.matches(selector)) return $sibling
+		    $sibling = $sibling.nextElementSibling;
+		  }
+		}
+
+		/**
+		 * Find an elements preceding sibling
+		 *
+		 * Utility function to find an elements previous sibling matching the provided
+		 * selector.
+		 *
+		 * @param {HTMLElement} $element - Element to find siblings for
+		 * @param {string} selector - selector for required sibling
+		 */
+		function getPreviousSibling($element, selector) {
+		  if (!$element) return
+		  // Get the previous sibling element
+		  let $sibling = $element.previousElementSibling;
+
+		  // If there's no selector, return the first sibling
+		  if (!selector) return $sibling
+
+		  // If the sibling matches our selector, use it
+		  // If not, jump to the next sibling and continue the loop
+		  while ($sibling) {
+		    if ($sibling.matches(selector)) return $sibling
+		    $sibling = $sibling.previousElementSibling;
+		  }
+		}
+
+		function findNearestMatchingElement($element, selector) {
+		  // If no element or selector is provided, return null
+		  if (!$element) return
+		  if (!selector) return
+
+		  // Start with the current element
+		  let $currentElement = $element;
+
+		  while ($currentElement) {
+		    // First check the current element
+		    if ($currentElement.matches(selector)) {
+		      return $currentElement
+		    }
+
+		    // Check all previous siblings
+		    let $sibling = $currentElement.previousElementSibling;
+		    while ($sibling) {
+		      // Check if the sibling itself is a heading
+		      if ($sibling.matches(selector)) {
+		        return $sibling
+		      }
+		      $sibling = $sibling.previousElementSibling;
+		    }
+
+		    // If no match found in siblings, move up to parent
+		    $currentElement = $currentElement.parentElement;
+		  }
+		}
+
+		/**
+		 * Move focus to element
+		 *
+		 * Sets tabindex to -1 to make the element programmatically focusable,
+		 * but removes it on blur as the element doesn't need to be focused again.
+		 *
+		 * @param {HTMLElement} $element - HTML element
+		 * @param {object} [options] - Handler options
+		 * @param {function(this: HTMLElement): void} [options.onBeforeFocus] - Callback before focus
+		 * @param {function(this: HTMLElement): void} [options.onBlur] - Callback on blur
+		 */
+		function setFocus($element, options = {}) {
+		  const isFocusable = $element.getAttribute('tabindex');
+
+		  if (!isFocusable) {
+		    $element.setAttribute('tabindex', '-1');
+		  }
+
+		  /**
+		   * Handle element focus
+		   */
+		  function onFocus() {
+		    $element.addEventListener('blur', onBlur, { once: true });
+		  }
+
+		  /**
+		   * Handle element blur
+		   */
+		  function onBlur() {
+		    if (options.onBlur) {
+		      options.onBlur.call($element);
+		    }
+
+		    if (!isFocusable) {
+		      $element.removeAttribute('tabindex');
+		    }
+		  }
+
+		  // Add listener to reset element on blur, after focus
+		  $element.addEventListener('focus', onFocus, { once: true });
+
+		  // Focus element
+		  if (options.onBeforeFocus) {
+		    options.onBeforeFocus.call($element);
+		  }
+		  $element.focus();
+		}
+
+		helpers = {
+		  removeAttributeValue,
+		  addAttributeValue,
+		  dragAndDropSupported,
+		  formDataSupported,
+		  fileApiSupported,
+		  nodeListForEach,
+		  getNextSibling,
+		  getPreviousSibling,
+		  findNearestMatchingElement,
+		  setFocus
+		};
+		return helpers;
+	}
+
+	var formValidator$1;
+	var hasRequiredFormValidator;
+
+	function requireFormValidator () {
+		if (hasRequiredFormValidator) return formValidator$1;
+		hasRequiredFormValidator = 1;
+		const $ = _global_window_jQuery;
+
+		const { addAttributeValue, removeAttributeValue } = requireHelpers();
+
+		function FormValidator(form, options) {
+		  this.form = form;
+		  this.errors = [];
+		  this.validators = [];
+		  $(this.form).on('submit', $.proxy(this, 'onSubmit'));
+		  this.summary =
+		    options && options.summary ? $(options.summary) : $('.govuk-error-summary');
+		  this.originalTitle = document.title;
+		}
+
+		FormValidator.entityMap = {
+		  '&': '&amp;',
+		  '<': '&lt;',
+		  '>': '&gt;',
+		  '"': '&quot;',
+		  "'": '&#39;',
+		  '/': '&#x2F;',
+		  '`': '&#x60;',
+		  '=': '&#x3D;'
+		};
+
+		FormValidator.prototype.escapeHtml = function (string) {
+		  return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+		    return FormValidator.entityMap[s]
+		  })
+		};
+
+		FormValidator.prototype.resetTitle = function () {
+		  document.title = this.originalTitle;
+		};
+
+		FormValidator.prototype.updateTitle = function () {
+		  document.title = `${this.errors.length} errors - ${document.title}`;
+		};
+
+		FormValidator.prototype.showSummary = function () {
+		  this.summary.html(this.getSummaryHtml());
+		  this.summary.removeClass('moj-hidden');
+		  this.summary.attr('aria-labelledby', 'errorSummary-heading');
+		  this.summary.focus();
+		};
+
+		FormValidator.prototype.getSummaryHtml = function () {
+		  let html =
+		    '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
+		  html += '<div class="govuk-error-summary__body">';
+		  html += '<ul class="govuk-list govuk-error-summary__list">';
+		  for (let i = 0, j = this.errors.length; i < j; i++) {
+		    const error = this.errors[i];
+		    html += '<li>';
+		    html += `<a href="#${this.escapeHtml(error.fieldName)}">`;
+		    html += this.escapeHtml(error.message);
+		    html += '</a>';
+		    html += '</li>';
+		  }
+		  html += '</ul>';
+		  html += '</div>';
+		  return html
+		};
+
+		FormValidator.prototype.hideSummary = function () {
+		  this.summary.addClass('moj-hidden');
+		  this.summary.removeAttr('aria-labelledby');
+		};
+
+		FormValidator.prototype.onSubmit = function (e) {
+		  this.removeInlineErrors();
+		  this.hideSummary();
+		  this.resetTitle();
+		  if (!this.validate()) {
+		    e.preventDefault();
+		    this.updateTitle();
+		    this.showSummary();
+		    this.showInlineErrors();
+		  }
+		};
+
+		FormValidator.prototype.showInlineErrors = function () {
+		  for (let i = 0, j = this.errors.length; i < j; i++) {
+		    this.showInlineError(this.errors[i]);
+		  }
+		};
+
+		FormValidator.prototype.showInlineError = function (error) {
+		  const errorSpanId = `${error.fieldName}-error`;
+		  const errorSpan = `<span class="govuk-error-message" id="${
+	    errorSpanId
+	  }">${this.escapeHtml(error.message)}</span>`;
+		  const control = $(`#${error.fieldName}`);
+		  const fieldContainer = control.parents('.govuk-form-group');
+		  const label = fieldContainer.find('label');
+		  const legend = fieldContainer.find('legend');
+		  const fieldset = fieldContainer.find('fieldset');
+		  fieldContainer.addClass('govuk-form-group--error');
+		  if (legend.length) {
+		    legend.after(errorSpan);
+		    fieldContainer.attr('aria-invalid', 'true');
+		    addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId);
+		  } else {
+		    label.after(errorSpan);
+		    control.attr('aria-invalid', 'true');
+		    addAttributeValue(control[0], 'aria-describedby', errorSpanId);
+		  }
+		};
+
+		FormValidator.prototype.removeInlineErrors = function () {
+		  for (let i = 0; i < this.errors.length; i++) {
+		    this.removeInlineError(this.errors[i]);
+		  }
+		};
+
+		FormValidator.prototype.removeInlineError = function (error) {
+		  const control = $(`#${error.fieldName}`);
+		  const fieldContainer = control.parents('.govuk-form-group');
+		  fieldContainer.find('.govuk-error-message').remove();
+		  fieldContainer.removeClass('govuk-form-group--error');
+		  fieldContainer.find('[aria-invalid]').attr('aria-invalid', 'false');
+		  const errorSpanId = `${error.fieldName}-error`;
+		  removeAttributeValue(
+		    fieldContainer.find('[aria-describedby]')[0],
+		    'aria-describedby',
+		    errorSpanId
+		  );
+		};
+
+		FormValidator.prototype.addValidator = function (fieldName, rules) {
+		  this.validators.push({
+		    fieldName,
+		    rules,
+		    field: this.form.elements[fieldName]
+		  });
+		};
+
+		FormValidator.prototype.validate = function () {
+		  this.errors = [];
+		  let validator = null;
+		  let validatorReturnValue = true;
+		  let i;
+		  let j;
+		  for (i = 0; i < this.validators.length; i++) {
+		    validator = this.validators[i];
+		    for (j = 0; j < validator.rules.length; j++) {
+		      validatorReturnValue = validator.rules[j].method(
+		        validator.field,
+		        validator.rules[j].params
+		      );
+
+		      if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
+		        this.errors.push({
+		          fieldName: validator.fieldName,
+		          message: validator.rules[j].message
+		        });
+		        break
+		      } else if (typeof validatorReturnValue === 'string') {
+		        this.errors.push({
+		          fieldName: validatorReturnValue,
+		          message: validator.rules[j].message
+		        });
+		        break
+		      }
+		    }
+		  }
+		  return this.errors.length === 0
+		};
+
+		formValidator$1 = { FormValidator };
+		return formValidator$1;
+	}
+
+	var formValidatorExports = requireFormValidator();
+	var formValidator = /*@__PURE__*/getDefaultExportFromCjs(formValidatorExports);
+
+	return formValidator;
+
+}));