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>
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 921268c..e9f2f72 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 2680cc3..7778ebe 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 32d4636..6106c50 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 f8d4af0..59df962 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 6fc9c1e..561816e 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 12e4868..ac70091 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 3a8cd3f..b2f2778 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 91db825..c5086f3 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 91ef34f..e08224d 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>