Просмотр исходного кода

improve artist premium trial form validation error message

Olivier Massot 7 месяцев назад
Родитель
Сommit
2528d34b91
1 измененных файлов с 9 добавлено и 1 удалено
  1. 9 1
      pages/shop/try/artist-premium.vue

+ 9 - 1
pages/shop/try/artist-premium.vue

@@ -328,11 +328,15 @@
                 </div>
                 </div>
 
 
                 <p class="text-center no-credit-card">
                 <p class="text-center no-credit-card">
-                  Aucune carte de crédit requise. En cliquant sur "Commencer Mon
+                  Aucune carte de crédit requise. En cliquant sur "Commencer mon
                   essai de 30 jours", vous acceptez de démarrer votre période
                   essai de 30 jours", vous acceptez de démarrer votre période
                   d'essai gratuit.
                   d'essai gratuit.
                 </p>
                 </p>
 
 
+                <div v-if="validationError" class="error">
+                  Des champs du formulaire sont invalides ou manquants.
+                </div>
+
                 <div v-if="errorMsg" class="error">
                 <div v-if="errorMsg" class="error">
                   {{ errorMsg }}
                   {{ errorMsg }}
                 </div>
                 </div>
@@ -565,6 +569,7 @@ const validateSubdomainAvailability = (value: string) => {
 // Form state
 // Form state
 const trialRequestSent: Ref<boolean> = ref(false)
 const trialRequestSent: Ref<boolean> = ref(false)
 const errorMsg: Ref<string | null> = ref(null)
 const errorMsg: Ref<string | null> = ref(null)
+const validationError: Ref<boolean> = ref(false)
 // Reference to the phone input component
 // Reference to the phone input component
 const phoneInput = ref(null)
 const phoneInput = ref(null)
 
 
@@ -573,9 +578,12 @@ const submit = async (): Promise<void> => {
   const { valid } = await form.value!.validate()
   const { valid } = await form.value!.validate()
 
 
   if (!valid) {
   if (!valid) {
+    validationError.value = true
     return
     return
   }
   }
 
 
+  validationError.value = false
+
   // Convert phone number to international format before submission
   // Convert phone number to international format before submission
   if (phoneInput.value) {
   if (phoneInput.value) {
     trialRequest.representativePhone = convertPhoneNumberToInternationalFormat(
     trialRequest.representativePhone = convertPhoneNumberToInternationalFormat(