Topic: Form validation - fields needing identical content
I'm actually using MDB5 1.7.0.
The instructions on form validation don't seem to explain how to check if two fields contain identical content.
For example, a typical scenario where we need to verify that the user has input a new password twice, identically:
<MDBCard>
<MDBCardHeader class="py-3"><strong>Change password</strong></MDBCardHeader>
<MDBCardBody class="text-center pt-4">
<MDBRow tag="form" class="needs-validation" novalidate @submit.prevent="updatePassword">
<MDBInput type="password" v-model="newPassword" :label="t('labels.newPassword')"
wrapperClass="mb-4" :invalidFeedback="t('validation.requiredField')" required>
<MDBIcon icon="key" iconStyle="fas" class="trailing"></MDBIcon>
</MDBInput>
<MDBInput type="password" v-model="confirmPassword" :label="t('labels.confirmPassword')"
wrapperClass="mb-4" :invalidFeedback="t('validation.passwordsIdentical')" required>
<MDBIcon icon="key" iconStyle="fas" class="trailing"></MDBIcon>
</MDBInput>
<SpinButton :text="t('buttons.apply')" :loading="isLoadingPassword" />
</MDBRow>
</MDBCardBody>
How can we add a validation rule of some kind to check this?
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 1.4.0
- Device: Desktop
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No
Tags
Related topics
Mikołaj Smoleński staff commented 3 years ago
In such case you just need to check if
newPasswordandconfirmPasswordrefs has the same content or I am wrong? I recommend to add a watcher onconfirmPasswordand inside it make an appropriate comparison of the two values. If are not equal then changevalidation.passwordsIdenticalto false.Keep coding, Mikołaj from MDB
gdaley pro premium priority commented 3 years ago
Not quite sure I follow you. I suppose I should compare the values of newPassword and confirmPassword in the updatePassword handler, is that correct?
What do you mean by "change validation.passwordsIdentical to false"? The "validation.passwordsIdentical" in my example above is just an i18n tag, which is used to show the invalidFeedback message.
gdaley pro premium priority commented 3 years ago
I see it now. Just checked the source code for MDBInput and it seems there is a prop named 'invalid'. So I will set that to false if the passwords aren't equal.
Would be nice if this could be included in the documentation.
Mikołaj Smoleński staff commented 3 years ago
Thanks for the feedback!
Keep coding, Mikołaj from MDB