All files / app/assets/javascripts/vue_shared/directives validation.js

98.46% Statements 64/65
88.88% Branches 32/36
100% Functions 18/18
98.33% Lines 59/60

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205                        33x   156x       185x         33x 516x 267x 267x 106x     267x     33x 19x 19x   19x 10x       33x 2226x     5743x   895x 2283x   2283x 182x           182x     2101x 2101x           2101x 2101x     2101x                                                         95x 95x   95x   895x 895x 895x 895x   895x 895x   895x   895x 78x   78x     895x 57x 57x 57x   57x       895x 508x     895x     1331x 1331x 1331x 1331x   1331x 1331x                   33x                                                                       33x 4x   7x       4x              
import { __ } from '~/locale';
import { getInstanceFromDirective } from '~/lib/utils/vue3compat/get_instance_from_directive';
 
/**
 * Validation messages will take priority based on the property order.
 *
 * For example:
 * { valueMissing: {...}, urlTypeMismatch: {...} }
 *
 * `valueMissing` will be displayed the user has entered a value
 *  after that, if the input is not a valid URL then `urlTypeMismatch` will show
 */
const defaultFeedbackMap = {
  valueMissing: {
    isInvalid: (el) => el.validity?.valueMissing,
    message: __('Please fill out this field.'),
  },
  urlTypeMismatch: {
    isInvalid: (el) => el.type === 'url' && el.validity?.typeMismatch,
    message: __('Please enter a valid URL format, ex: http://www.example.com/home'),
  },
};
 
const getFeedbackForElement = (feedbackMap, el) => {
  const field = Object.values(feedbackMap).find((f) => f.isInvalid(el));
  let elMessage = null;
  if (field) {
    elMessage = el.getAttribute('validation-message');
  }
 
  return field?.message || elMessage || el.validationMessage;
};
 
const focusFirstInvalidInput = (e) => {
  const { target: formEl } = e;
  const invalidInput = formEl.querySelector('input:invalid');
 
  if (invalidInput) {
    invalidInput.focus();
  }
};
 
const getInputElement = (el) => {
  return el.querySelector('input') || el;
};
 
const isEveryFieldValid = (form) => Object.values(form.fields).every(({ state }) => state === true);
 
const createValidator = (feedbackMap) => ({ el, form, reportInvalidInput = false }) => {
  const { name } = el;
 
  if (!name) {
    Iif (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(
        '[gitlab] the validation directive requires the given input to have "name" attribute',
      );
    }
    return;
  }
 
  const formField = form.fields[name];
  const isValid = el.checkValidity();
 
  // This makes sure we always report valid fields - this can be useful for cases where the consuming
  // component's logic depends on certain fields being in a valid state.
  // Invalid input, on the other hand, should only be reported once we want to display feedback to the user.
  // (eg.: After a field has been touched and moved away from, a submit-button has been clicked, ...)
  formField.state = reportInvalidInput ? isValid : isValid || null;
  formField.feedback = reportInvalidInput ? getFeedbackForElement(feedbackMap, el) : '';
 
  // eslint-disable-next-line no-param-reassign
  form.state = isEveryFieldValid(form);
};
 
/**
 * Takes an object that allows to add or change custom feedback messages.
 * See possibilities here: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
 *
 * The passed in object will be merged with the built-in feedback
 * so it is possible to override a built-in message.
 *
 * @example
 * validate({
 *   tooLong: {
 *     isInvalid: el => el.validity.tooLong === true,
 *     message: 'Your custom feedback'
 *   }
 * })
 *
 * @example
 *   validate({
 *     valueMissing: {
 *       message: 'Your custom feedback'
 *     }
 *   })
 *
 * @param {Object<string, { message: string, isValid: ?function}>} customFeedbackMap
 * @returns {{ inserted: function, update: function }} validateDirective
 */
export default function initValidation(customFeedbackMap = {}) {
  const feedbackMap = { ...defaultFeedbackMap, ...customFeedbackMap };
  const elDataMap = new WeakMap();
 
  return {
    inserted(element, binding, vnode) {
      const { arg: showGlobalValidation } = binding;
      const el = getInputElement(element);
      const { form: formEl } = el;
      const instance = getInstanceFromDirective({ binding, vnode });
 
      const validate = createValidator(feedbackMap);
      const elData = { validate, isTouched: false, isBlurred: false };
 
      elDataMap.set(el, elData);
 
      el.addEventListener('input', function markAsTouched() {
        elData.isTouched = true;
        // once the element has been marked as touched we can stop listening on the 'input' event
        el.removeEventListener('input', markAsTouched);
      });
 
      el.addEventListener('blur', function markAsBlurred({ target }) {
        Eif (elData.isTouched) {
          elData.isBlurred = true;
          validate({ el: target, form: instance.form, reportInvalidInput: true });
          // this event handler can be removed, since the live-feedback in `update` takes over
          el.removeEventListener('blur', markAsBlurred);
        }
      });
 
      if (formEl) {
        formEl.addEventListener('submit', focusFirstInvalidInput);
      }
 
      validate({ el, form: instance.form, reportInvalidInput: showGlobalValidation });
    },
    update(element, binding, vnode) {
      const el = getInputElement(element);
      const { arg: showGlobalValidation } = binding;
      const { validate, isTouched, isBlurred } = elDataMap.get(el);
      const showValidationFeedback = showGlobalValidation || (isTouched && isBlurred);
 
      const instance = getInstanceFromDirective({ binding, vnode });
      validate({ el, form: instance.form, reportInvalidInput: showValidationFeedback });
    },
  };
}
 
/**
 * This is a helper that initialize the form fields structure to be used in initForm
 * @param {*} fieldValues
 * @returns formObject
 */
const initFormField = ({ value, required = true, skipValidation = false }) => ({
  value,
  required,
  state: skipValidation ? true : null,
  feedback: null,
});
 
/**
 * This is a helper that initialize the form structure that is compliant to be used with the validation directive
 *
 * @example
 * const form initForm = initForm({
 *   fields: {
 *     name: {
 *       value: 'lorem'
 *     },
 *     description: {
 *       value: 'ipsum',
 *       required: false,
 *       skipValidation: true
 *     }
 *   }
 * })
 *
 * @example
 * const form initForm = initForm({
 *   state: true,   // to override
 *   foo: {         // something custom
 *     bar: 'lorem'
 *   },
 *   fields: {...}
 * })
 *
 * @param {*} formObject
 * @returns form
 */
export const initForm = ({ fields = {}, ...rest } = {}) => {
  const initFields = Object.fromEntries(
    Object.entries(fields).map(([fieldName, fieldValues]) => {
      return [fieldName, initFormField(fieldValues)];
    }),
  );
 
  return {
    state: false,
    showValidation: false,
    ...rest,
    fields: initFields,
  };
};