Add hidden field validation errors

app/src/components/v-form/form-field.vue

@@ -61,13 +61,13 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
-import { Field } from '@/types/';
+import { Field } from '../../types/';
 import marked from 'marked';
 import FormFieldLabel from './form-field-label.vue';
 import FormFieldMenu from './form-field-menu.vue';
 import FormFieldInterface from './form-field-interface.vue';
 import { ValidationError } from './types';
-import { getJSType } from '@/utils/get-js-type';
+import { getJSType } from '../../utils/get-js-type';
 import { isEqual } from 'lodash';
 
 export default defineComponent({

app/src/components/v-form/v-form.vue

@@ -1,5 +1,17 @@
 <template>
 	<div class="v-form" ref="el" :class="gridClass">
+		<v-notice type="danger" v-if="unknownValidationErrors.length > 0" class="full">
+			<div>
+				<p>{{ $t('unknown_validation_errors') }}</p>
+				<ul>
+					<li v-for="(validationError, index) of unknownValidationErrors" :key="index">
+						<strong>{{ validationError.field }}</strong>
+						: {{ $t(`validationError.${validationError.type}`, validationError) }}
+					</li>
+				</ul>
+			</div>
+		</v-notice>
+
 		<form-field
 			v-for="field in formFields"
 			:field="field"
@@ -21,13 +33,13 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref, provide } from '@vue/composition-api';
-import { useFieldsStore } from '@/stores/';
-import { Field, FilterOperator } from '@/types';
-import { useElementSize } from '@/composables/use-element-size';
+import { useFieldsStore } from '../../stores/';
+import { Field, FilterOperator } from '../../types';
+import { useElementSize } from '../../composables/use-element-size';
 import { clone, cloneDeep } from 'lodash';
 import marked from 'marked';
 import FormField from './form-field.vue';
-import useFormFields from '@/composables/use-form-fields';
+import useFormFields from '../../composables/use-form-fields';
 import { ValidationError } from './types';
 
 type FieldValues = {
@@ -87,9 +99,18 @@ export default defineComponent({
 		});
 
 		const { formFields, gridClass } = useForm();
-
 		const { toggleBatchField, batchActiveFields } = useBatch();
 
+		/**
+		 * The validation errors that don't apply to any visible fields. This can occur if an admin accidentally
+		 * made a hidden field required for example. We want to show these errors at the top of the page, so the
+		 * admin can be made aware
+		 */
+		const unknownValidationErrors = computed(() => {
+			const fieldKeys = formFields.value.map((field) => field.field);
+			return props.validationErrors.filter((error) => fieldKeys.includes(error.field) === false);
+		});
+
 		provide('values', values);
 
 		return {
@@ -102,6 +123,7 @@ export default defineComponent({
 			toggleBatchField,
 			unsetValue,
 			marked,
+			unknownValidationErrors,
 		};
 
 		function useForm() {
@@ -205,7 +227,7 @@ body {
 </style>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/form-grid';
+@import '../../styles/mixins/form-grid';
 
 .v-form {
 	@include form-grid;

app/src/lang/en-US/index.json

@@ -85,6 +85,8 @@
 	"markdown": "Markdown",
 	"tabbed": "Tabbed",
 
+	"unknown_validation_errors": "There were validation errors for the following hidden fields:",
+
 	"validationError": {
 		"eq": "Value has to be {valid}",
 		"neq": "Value can't be {invalid}",