Globally defined vee-validate rules + Use i18n to translate rule errors

packages/theme/components/LoginModal.vue

@@ -139,7 +139,7 @@
                 v-model="form.firstName"
                 :valid="!errors[0]"
                 :errorMessage="errors[0]"
-                name="first-name"
+                name="firstName"
                 :label="$t('First name')"
                 class="form__element"
               />
@@ -150,7 +150,7 @@
                 v-model="form.lastName"
                 :valid="!errors[0]"
                 :errorMessage="errors[0]"
-                name="last-name"
+                name="lastName"
                 :label="$t('Last name')"
                 class="form__element"
               />
@@ -173,7 +173,7 @@
                 v-model="createAccount"
                 :valid="!errors[0]"
                 :errorMessage="errors[0]"
-                name="create-account"
+                name="createAccount"
                 :label="$t('I accept the terms & conditions')"
                 class="form__element"
               />
@@ -206,22 +206,11 @@
 <script>
 import { ref, watch, reactive, computed } from '@nuxtjs/composition-api';
 import { SfModal, SfInput, SfButton, SfCheckbox, SfLoader, SfAlert, SfBar } from '@storefront-ui/vue';
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { required, email } from 'vee-validate/dist/rules';
+import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { useUser, useForgotPassword } from '@vue-storefront/sylius';
 import { useUiState, useUiNotification } from '~/composables';
 import { useVSFContext } from '@vue-storefront/core';
 
-extend('email', {
-  ...email,
-  message: 'Invalid email'
-});
-
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
-
 export default {
   name: 'LoginModal',
   components: {

packages/theme/components/MyAccount/PasswordResetForm.vue

@@ -24,7 +24,7 @@
             :errorMessage="errors[0]"
           />
         </ValidationProvider>
-        <ValidationProvider rules="required|confirmed:password" v-slot="{ errors }" class="form__element">
+        <ValidationProvider rules="required|passwordMatch:password" v-slot="{ errors }" class="form__element">
           <SfInput
             v-model="form.repeatPassword"
             type="password"

packages/theme/components/MyAccount/ShippingAddressForm.vue

@@ -158,8 +158,7 @@ import {
   SfSelect,
   SfCheckbox
 } from '@storefront-ui/vue';
-import { required, min, oneOf } from 'vee-validate/dist/rules';
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
+import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { reactive } from '@nuxtjs/composition-api';
 import { useUiNotification } from '~/composables/';
 
@@ -169,20 +168,6 @@ const COUNTRIES = [
   { key: 'IT', label: 'Italy' },
   { key: 'PL', label: 'Poland' }
 ];
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
-
-extend('min', {
-  ...min,
-  message: 'The field should have at least {length} characters'
-});
-
-extend('oneOf', {
-  ...oneOf,
-  message: 'Invalid country'
-});
 
 export default {
   name: 'ShippingAddressForm',

packages/theme/components/Product/AddReviewForm.vue

@@ -19,6 +19,7 @@
       <ValidationProvider rules="required" v-slot="{ errors }" class="form__element">
         <SfInput
           v-model.number="form.rating"
+          name="rate"
           type="number"
           :label="$t('Rating (1-5)')"
           min="1"
@@ -33,6 +34,7 @@
         <SfTextarea
           v-model="form.comment"
           :label="$t('Comment')"
+          name='comment'
           cols="30"
           rows="5"
           required

packages/theme/lang/de.js

@@ -1,4 +1,5 @@
 /* eslint-disable  */
+import veeValidateMessages from 'vee-validate/dist/locale/de.json'
 
 export default {
   'Categories': 'Kategorien',
@@ -225,5 +226,25 @@ export default {
   'Please check your email to verify your account': 'Bitte überprüfen Sie Ihre E-Mail, um Ihr Konto zu bestätigen',
   'Thank you for your order!': 'Vielen Dank für Ihren Auftrag!',
   'Cart has been updated': 'Warenkorb wurde aktualisiert',
-  'Select country': 'Land auswählen' 
+  'Select country': 'Land auswählen',
+  'Passwords don\'t match': 'Passwörter stimmen nicht überein',
+  'Password must have at least 8 characters including one letter and a number': '"Das Passwort muss mindestens 8 Zeichen lang sein und mindestens einen Buchstaben und eine Zahl enthalten',
+  firstName: 'vorname',
+  lastName: 'nachname',
+  createAccount: 'geschäftsbedingungen',
+  currentPassword: 'aktuelles passwort',
+  newPassword: 'neues passwort',
+  repeatPassword: 'kennwort wiederholen',
+  gender: 'gender',
+  phoneNumber: 'telefonnummer',
+  birthday: 'geburtstag',
+  subscribedToNewsletter: 'newsletter abonnement',
+  street: 'straße',
+  city: 'stadt',
+  zipCode: 'postleitzahl',
+  countryCode: 'land',
+  title: 'titel',
+  rate: 'rate',
+  comment: 'kommentar',
+  validations: veeValidateMessages.messages
 };

packages/theme/lang/en.js

@@ -1,4 +1,5 @@
 /* eslint-disable  */
+import veeValidateMessages from 'vee-validate/dist/locale/en.json'
 
 export default {
   'Categories': 'Categories',
@@ -225,5 +226,25 @@ export default {
   'Please check your email to verify your account': 'Please check your email to verify your account',
   'Thank you for your order!': 'Thank you for your order!',
   'Cart has been updated': 'Cart has been updated',
-  'Select country': 'Select country' 
+  'Select country': 'Select country',
+  'Passwords don\'t match': 'Passwords don\'t match',
+  'Password must have at least 8 characters including one letter and a number': 'Password must have at least 8 characters including one letter and a number',
+  firstName: 'firstname',
+  lastName: 'lastname',
+  createAccount: 'terms and conditions agreement',
+  currentPassword: 'current password',
+  newPassword: 'new password',
+  repeatPassword: 'repeat password',
+  gender: 'gender',
+  phoneNumber: 'phone number',
+  birthday: 'birthday',
+  subscribedToNewsletter: 'newsletter subscription',
+  street: 'street',
+  city: 'city',
+  zipCode: 'postcode',
+  countryCode: 'country',
+  title: 'title',
+  rate: 'rate',
+  comment: 'comment',
+  validations: veeValidateMessages.messages
 };

packages/theme/nuxt.config.js

@@ -84,6 +84,9 @@ export default {
     'vue-scrollto/nuxt',
     '@vue-storefront/middleware/nuxt'
   ],
+  plugins: [
+    '~/plugins/configure-vee-validate.js'
+  ],
   i18n: i18n,
   styleResources: {
     scss: [require.resolve('@storefront-ui/shared/styles/_helpers.scss', { paths: [process.cwd()] }), './assets/styles.scss']

packages/theme/pages/Checkout/Billing.vue

@@ -198,29 +198,10 @@ import {
 } from '@storefront-ui/vue';
 import { ref, computed, onMounted } from '@nuxtjs/composition-api';
 import { useBilling, useUser, useUserBilling, userBillingGetters } from '@vue-storefront/sylius';
-import { required, min, digits, email } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { onSSR, useVSFContext } from '@vue-storefront/core';
 import { useUiNotification, useUiState } from '~/composables/';
 
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
-extend('min', {
-  ...min,
-  message: 'The field should have at least {length} characters'
-});
-extend('digits', {
-  ...digits,
-  message: 'Please provide a valid phone number'
-});
-
-extend('email', {
-  ...email,
-  message: 'Please provide a valid e-mail address'
-});
-
 export default {
   name: 'Billing',
   components: {

packages/theme/pages/Checkout/Shipping.vue

@@ -206,23 +206,9 @@ import {
 import { ref, computed, onMounted } from '@nuxtjs/composition-api';
 import { useUiNotification } from '~/composables/';
 import { useBilling, useShipping, useUserShipping, userShippingGetters, useUser } from '@vue-storefront/sylius';
-import { required, min, digits } from 'vee-validate/dist/rules';
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
+import { ValidationProvider, ValidationObserver } from 'vee-validate';
 import { onSSR, useVSFContext } from '@vue-storefront/core';
 
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
-extend('min', {
-  ...min,
-  message: 'The field should have at least {length} characters'
-});
-extend('digits', {
-  ...digits,
-  message: 'Please provide a valid phone number'
-});
-
 export default {
   name: 'Shipping',
   components: {

packages/theme/pages/MyAccount/MyProfile.vue

@@ -28,38 +28,11 @@
 </template>
 
 <script>
-import { extend } from 'vee-validate';
-import { email, required, min, confirmed } from 'vee-validate/dist/rules';
 import ProfileUpdateForm from '~/components/MyAccount/ProfileUpdateForm';
 import PasswordResetForm from '~/components/MyAccount/PasswordResetForm';
 import { SfTabs, SfInput, SfButton } from '@storefront-ui/vue';
 import { useUser, userGetters } from '@vue-storefront/sylius';
 
-extend('email', {
-  ...email,
-  message: 'Invalid email'
-});
-
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
-
-extend('min', {
-  ...min,
-  message: 'The field should have at least {length} characters'
-});
-
-extend('password', {
-  validate: value => String(value).length >= 8 && String(value).match(/[A-Za-z]/gi) && String(value).match(/[0-9]/gi),
-  message: 'Password must have at least 8 characters including one letter and a number'
-});
-
-extend('confirmed', {
-  ...confirmed,
-  message: 'Passwords don\'t match'
-});
-
 export default {
   name: 'PersonalDetails',
 

packages/theme/pages/ResetPassword.vue

@@ -33,7 +33,7 @@
                 :valid="!errors[0]"
                 :errorMessage="errors[0]"
                 :label="$t('Repeat Password')"
-                name="repeat-password"
+                name="repeatPassword"
                 type="password"
                 class="form__element"
               />
@@ -67,13 +67,7 @@
 import { SfModal, SfButton, SfLoader, SfBar, SfInput } from '@storefront-ui/vue';
 import { ref, computed } from '@nuxtjs/composition-api';
 import { useForgotPassword, forgotPasswordGetters } from '@vue-storefront/sylius';
-import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { required } from 'vee-validate/dist/rules';
-
-extend('required', {
-  ...required,
-  message: 'This field is required'
-});
+import { ValidationProvider, ValidationObserver } from 'vee-validate';
 
 export default {
   name: 'ResetPassword',

packages/theme/plugins/configure-vee-validate.js

@@ -0,0 +1,31 @@
+import { required, min, oneOf, email, digits, confirmed } from 'vee-validate/dist/rules';
+import { extend, configure } from 'vee-validate';
+
+export default function ({ app }) {
+  extend('required', required);
+
+  extend('min', min);
+
+  extend('oneOf', oneOf);
+
+  extend('email', email);
+
+  extend('digits', digits);
+
+  extend('passwordMatch', {
+    ...confirmed,
+    message: app.i18n.t('Passwords don\'t match')
+  });
+
+  extend('password', {
+    validate: value => String(value).length >= 8 && String(value).match(/[A-Za-z]/gi) && String(value).match(/[0-9]/gi),
+    message: app.i18n.t('Password must have at least 8 characters including one letter and a number')
+  });
+
+  configure({
+    defaultMessage: (field, values) => {
+      values._field_ = app.i18n.t(`${field}`);
+      return app.i18n.t(`validations.${values._rule_}`, values);
+    }
+  });
+}