Merge branch 'master' into fix/FIO-9173-notation

package.json

@@ -82,7 +82,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-dev.98.17ba6ea",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "v2.1.0-dev.174.9a3c6ec",
+    "@formio/core": "2.1.0-dev.191.8c609ab",
     "@formio/text-mask-addons": "^3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",

src/components/_classes/component/Component.js

@@ -3706,12 +3706,6 @@ export default class Component extends Element {
   }
 
   shouldSkipValidation(data, row, flags = {}) {
-    const { validateWhenHidden = false } = this.component || {};
-    const forceValidOnHidden = (!this.visible || !this.checkCondition(row, data)) && !validateWhenHidden;
-    if (forceValidOnHidden) {
-      // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.
-      this._errors = [];
-    }
     const rules = [
       // Do not validate if the flags say not too.
       () => flags.noValidate,
@@ -3722,7 +3716,14 @@ export default class Component extends Element {
       // Check to see if we are editing and if so, check component persistence.
       () => this.isValueHidden(),
       // Force valid if component is hidden.
-      () => forceValidOnHidden
+      () => {
+        if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {
+          // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.
+          this._errors = [];
+          return true;
+        }
+        return false;
+      }
     ];
 
     return rules.some(pred => pred());

src/utils/i18n.js

@@ -83,6 +83,10 @@ export class I18n {
 
     t(text, ...args) {
         if (this.currentLanguage[text]) {
+            const customTranslationFieldName = args[0]?.field;
+            if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {
+                args[0].field = this.currentLanguage[customTranslationFieldName]
+            }
             return Evaluator.interpolateString(this.currentLanguage[text], ...args);
         }
         return Evaluator.interpolateString(text, ...args);

test/forms/translationErrorMessages.js

@@ -0,0 +1,25 @@
+export default {
+	name: "textrandom",
+	path: "textrandom",
+	type: "form",
+	display: "form",
+	components: [
+		{
+			label: "My textField",
+			applyMaskOn: "change",
+			tableView: true,
+			validate: {
+				minLength: 5,
+				minWords: 2
+			},
+			validateWhenHidden: false,
+			key: "textField",
+			type: "textfield",
+			input: true
+		},
+	],
+	created: "2024-11-14T15:52:30.402Z",
+	modified: "2024-11-15T07:03:41.301Z",
+	machineName: "glvmkehegcvqksg:text",
+}
+

test/unit/SelectBoxes.unit.js

@@ -292,54 +292,6 @@ describe('SelectBoxes Component', () => {
           }, 300);
         });
     });
-
-    it('Should provide validation for ValueProperty', (done) => {
-      const form = _.cloneDeep(comp5);
-      const element = document.createElement('div');
-      const originalMakeRequest = Formio.makeRequest;
-
-      Formio.makeRequest = function() {
-        return new Promise(resolve => {
-          const values = [
-            { name : 'Alabama', abbreviation : 'AL' },
-            { name : 'Alaska', abbreviation: { a: 2, b: 'c' } },
-            { name : 'American Samoa', abbreviation: true }
-          ];
-          resolve(values);
-        });
-      };
-
-      Formio.createForm(element, form).then(async form => {
-        const selectBoxes = form.getComponent('selectBoxes');
-
-        setTimeout(()=>{
-          // TODO: previously, this was programmatically assigning a boolean value to the `input.checked` property; however,
-          // this does not bubble a change event to the form, and we need to investigate why
-          selectBoxes.setValue({ 'AL': true, '[object Object]': true, 'true': true });
-
-          setTimeout(()=>{
-            const submit = form.getComponent('submit');
-            const clickEvent = new Event('click');
-            const submitBtn = submit.refs.button;
-            submitBtn.dispatchEvent(clickEvent);
-
-            setTimeout(()=>{
-              assert.equal(form.errors.length, 1);
-              assert.equal(selectBoxes.errors[0].message, 'Invalid Value Property');
-              selectBoxes.setValue({ 'AL': true });
-
-              setTimeout(()=>{
-                assert.equal(form.errors.length, 0);
-                assert.equal(!!selectBoxes.errors.length, 0);
-                document.innerHTML = '';
-                Formio.makeRequest = originalMakeRequest;
-                done();
-              }, 300);
-            }, 300);
-          }, 600);
-        }, 500);
-      }).catch(done);
-    });
   });
 
   it('Should set "checked" attribute correctly when value is changed', (done) => {

test/unit/Webform.unit.js

@@ -86,6 +86,7 @@ import webformWithNestedWizard from '../forms/webformWIthNestedWizard';
 import formWithUniqueValidation from '../forms/formWithUniqueValidation.js';
 import formWithConditionalEmail from '../forms/formWithConditionalEmail.js';
 import formsWithSimpleConditionals from '../forms/formsWithSimpleConditionals.js';
+import translationErrorMessages from '../forms/translationErrorMessages.js';
 const SpySanitize = sinon.spy(FormioUtils, 'sanitize');
 
 if (_.has(Formio, 'Components.setComponents')) {
@@ -928,6 +929,29 @@ describe('Webform tests', function() {
     }).catch(done);
   });
 
+  it('Should translate field name in error messages', (done) => {
+    const element = document.createElement('div');
+    const form = new Webform(element, {
+      language: 'en',
+      i18n: {
+        en: {
+          'My textField': 'My Value'
+        },
+      }
+    });
+    form.setForm(translationErrorMessages).then(() => {
+      const textField = form.getComponent('textField');
+      textField.setValue('123');
+      textField.onChange()
+      setTimeout(() => {
+        assert.equal(form.errors.length, 2);
+        assert.equal(form.errors[0].message, 'My Value must have at least 5 characters.');
+        assert.equal(form.errors[1].message, 'My Value must have at least 2 words.');
+        done();
+      }, 300);
+    }).catch(done);
+  });
+
   it('Should translate value in franch if _userInput option is provided and value does not present in reserved translation names', done => {
     const formElement = document.createElement('div');
     const selectLabel = 'Select test label';