Form validation - fields needing identical content

Topic: Form validation - fields needing identical content

gdaley priority asked 2 years ago

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?

Mikołaj Smoleński staff commented 2 years ago

In such case you just need to check if newPassword and confirmPassword refs has the same content or I am wrong? I recommend to add a watcher on confirmPassword and inside it make an appropriate comparison of the two values. If are not equal then change validation.passwordsIdentical to false.

Keep coding, Mikołaj from MDB

gdaley priority commented 2 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 priority commented 2 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 2 years ago

Thanks for the feedback!

Keep coding, Mikołaj from MDB

Add comment

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

ForumUser: Priority
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

gdaley

5Support score
1Questions 0Answers 0Snippets