Invalid feedback if condition change

For required, invalid format, minlength, maxlength, date, pattern
validation if condition change in the few components

Change-Id: Id8eebc140301e48dde833a604ca92426ebf77c9c
Signed-off-by: Surya Venkatesan <suryav@ami.com>

9 files changed, 29 insertions, 25 deletions

diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 921268c0..e9f2f72a 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -16,10 +16,10 @@
             @blur="v$.fromDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
-            <template v-if="!v$.fromDate.pattern">
+            <template v-if="v$.fromDate.pattern.$invalid">
               {{ $t('global.form.invalidFormat') }}
             </template>
-            <template v-if="!v$.fromDate.maxDate">
+            <template v-if="v$.fromDate.maxDate.$invalid">
               {{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
             </template>
           </b-form-invalid-feedback>
@@ -62,10 +62,10 @@
             @blur="v$.toDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
-            <template v-if="!v$.toDate.pattern">
+            <template v-if="v$.toDate.pattern.$invalid">
               {{ $t('global.form.invalidFormat') }}
             </template>
-            <template v-if="!v$.toDate.minDate">
+            <template v-if="v$.toDate.minDate.$invalid">
               {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
             </template>
           </b-form-invalid-feedback>
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 2680cc35..7778ebee 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -28,7 +28,7 @@
             >
             </b-form-input>
             <b-form-invalid-feedback role="alert">
-              <template v-if="!v$.form.password.required">
+              <template v-if="v$.form.password.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
             </b-form-invalid-feedback>
@@ -49,10 +49,12 @@
             >
             </b-form-input>
             <b-form-invalid-feedback role="alert">
-              <template v-if="!v$.form.passwordConfirm.required">
+              <template v-if="v$.form.passwordConfirm.required.$invalid">
                 {{ $t('global.form.fieldRequired') }}
               </template>
-              <template v-else-if="!v$.form.passwordConfirm.sameAsPassword">
+              <template
+                v-else-if="v$.form.passwordConfirm.sameAsPassword.$invalid"
+              >
                 {{ $t('global.form.passwordsDoNotMatch') }}
               </template>
             </b-form-invalid-feedback>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 32d46361..6106c50d 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -26,7 +26,7 @@
       >
       </b-form-input>
       <b-form-invalid-feedback id="username-required" role="alert">
-        <template v-if="!v$.userInfo.username.required">
+        <template v-if="v$.userInfo.username.required.$invalid">
           {{ $t('global.form.fieldRequired') }}
         </template>
       </b-form-invalid-feedback>
@@ -45,12 +45,12 @@
           @input="v$.userInfo.password.$touch()"
         >
         </b-form-input>
+        <b-form-invalid-feedback id="password-required" role="alert">
+          <template v-if="v$.userInfo.password.required.$invalid">
+            {{ $t('global.form.fieldRequired') }}
+          </template>
+        </b-form-invalid-feedback>
       </input-password-toggle>
-      <b-form-invalid-feedback id="password-required" role="alert">
-        <template v-if="!v$.userInfo.password.required">
-          {{ $t('global.form.fieldRequired') }}
-        </template>
-      </b-form-invalid-feedback>
     </div>
     <b-button
       class="mt-3"
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index f8d4af0c..59df9625 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -23,7 +23,7 @@
           @input="v$.form.serverUri.$touch()"
         />
         <b-form-invalid-feedback role="alert">
-          <template v-if="!v$.form.serverUri.required">
+          <template v-if="v$.form.serverUri.required.$invalid">
             {{ $t('global.form.fieldRequired') }}
           </template>
         </b-form-invalid-feedback>
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 6fc9c1e7..561816e0 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -65,8 +65,8 @@
                 <b-form-invalid-feedback role="alert">
                   <template
                     v-if="
-                      !v$.form.newPassword.minLength ||
-                      !v$.form.newPassword.maxLength
+                      v$.form.newPassword.minLength.$invalid ||
+                      v$.form.newPassword.maxLength.$invalid
                     "
                   >
                     {{
@@ -95,7 +95,9 @@
                   @input="v$.form.confirmPassword.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
-                  <template v-if="!v$.form.confirmPassword.sameAsPassword">
+                  <template
+                    v-if="v$.form.confirmPassword.sameAsPassword.$invalid"
+                  >
                     {{ $t('pageProfileSettings.passwordsDoNotMatch') }}
                   </template>
                 </b-form-invalid-feedback>
diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue
index 12e4868b..ac700915 100644
--- a/src/views/ResourceManagement/Power.vue
+++ b/src/views/ResourceManagement/Power.vue
@@ -60,10 +60,10 @@
               ></b-form-input>
 
               <b-form-invalid-feedback id="input-live-feedback" role="alert">
-                <template v-if="!v$.powerCapValue.required">
+                <template v-if="v$.powerCapValue.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-else-if="!v$.powerCapValue.between">
+                <template v-else-if="v$.powerCapValue.between.$invalid">
                   {{ $t('global.form.invalidValue') }}
                 </template>
               </b-form-invalid-feedback>
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index 3a8cd3f0..b2f27789 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -32,7 +32,7 @@
           >
           </b-form-select>
           <b-form-invalid-feedback role="alert">
-            <template v-if="!v$.form.certificateType.required">
+            <template v-if="v$.form.certificateType.required.$invalid">
               {{ $t('global.form.fieldRequired') }}
             </template>
           </b-form-invalid-feedback>
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 91db8258..c5086f3d 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -31,11 +31,11 @@
                 @input="v$.form.lockoutThreshold.$touch()"
               />
               <b-form-invalid-feedback role="alert">
-                <template v-if="!v$.form.lockoutThreshold.required">
+                <template v-if="v$.form.lockoutThreshold.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
                 <template
-                  v-if="
+                  v-else-if="
                     !v$.form.lockoutThreshold.minLength ||
                     !v$.form.lockoutThreshold.maxLength
                   "
@@ -87,7 +87,7 @@
                   @input="v$.form.lockoutDuration.$touch()"
                 />
                 <b-form-invalid-feedback role="alert">
-                  <template v-if="!v$.form.lockoutDuration.required">
+                  <template v-if="v$.form.lockoutDuration.required.$invalid">
                     {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template v-else-if="!v$.form.lockoutDuration.minvalue">
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 91ef34f0..e08224d7 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -22,10 +22,10 @@
               />
 
               <b-form-invalid-feedback role="alert">
-                <template v-if="!v$.form.ipAddress.required">
+                <template v-if="v$.form.ipAddress.required.$invalid">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-if="!v$.form.ipAddress.ipAddress">
+                <template v-if="v$.form.ipAddress.ipAddress.$invalid">
                   {{ $t('global.form.invalidFormat') }}
                 </template>
               </b-form-invalid-feedback>