diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/directives/validation.js')
-rw-r--r-- | app/assets/javascripts/vue_shared/directives/validation.js | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/directives/validation.js b/app/assets/javascripts/vue_shared/directives/validation.js index 692f2769b88..779b04dc2bd 100644 --- a/app/assets/javascripts/vue_shared/directives/validation.js +++ b/app/assets/javascripts/vue_shared/directives/validation.js @@ -1,4 +1,3 @@ -import { merge } from 'lodash'; import { s__ } from '~/locale'; /** @@ -21,8 +20,15 @@ const defaultFeedbackMap = { }, }; -const getFeedbackForElement = (feedbackMap, el) => - Object.values(feedbackMap).find((f) => f.isInvalid(el))?.message || el.validationMessage; +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; @@ -68,6 +74,7 @@ const createValidator = (context, feedbackMap) => ({ el, reportInvalidInput = fa /** * 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. @@ -75,7 +82,7 @@ const createValidator = (context, feedbackMap) => ({ el, reportInvalidInput = fa * @example * validate({ * tooLong: { - * check: el => el.validity.tooLong === true, + * isInvalid: el => el.validity.tooLong === true, * message: 'Your custom feedback' * } * }) @@ -91,7 +98,7 @@ const createValidator = (context, feedbackMap) => ({ el, reportInvalidInput = fa * @returns {{ inserted: function, update: function }} validateDirective */ export default function initValidation(customFeedbackMap = {}) { - const feedbackMap = merge(defaultFeedbackMap, customFeedbackMap); + const feedbackMap = { ...defaultFeedbackMap, ...customFeedbackMap }; const elDataMap = new WeakMap(); return { |