Ensuring the confirmation password is validated using Vue/Quasar

As a beginner in Vue, I'm writing code to connect to an application using Vue/Quasar/C#. However, I am struggling to understand how rules are executed. The specific code snippet I have written is aimed at checking if the input fields for passwords are not empty.

<q-form v-bind:submit="createUser"
            v-bind:reset="resetCreateUser"
            class="q-gutter-md"
            v-if="status==2"
            ref="frmCreateUser"
            autofocus>
         <q-input filled
                 v-model="loginData.password"
                 label="Votre mot de passe"
                 hint="Saisissez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="[ val => val && val.length > 0 || 'Saisissez votre mot de passe']"
                 ref="fldPasswordCreateUser"
                 data-vv-name="fldPasswordCreateUser">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
           </template>
       </q-input>
       <q-input filled
                 v-model="loginData.passwordConfirm"
                 label="Confirmez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="[ val => val && val.length > 0 || 'Saisissez votre mot de passe']">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
           </template>
       </q-input>
       ...
    </q-form>

In my implementation, I am checking the password equality using the method

if (this.loginData.password == this.loginData.passwordConfirm) {...
. My intention is to modify the v-bind:rules attribute to display error messages like 'empty field' and 'Password not match', but I am encountering syntax errors consistently...

UPDATE

I attempted the following:

v-bind:rules="[val => val && val.length > 0 || 'saisissez quelque chose :)', val => val != $refs.fldPasswordChange || 'Mots de passe différents']"

Although I tried to implement two controls, it seems that the second one does not trigger as expected.

UPDATE2

Upon Dean's suggestion, I made further adjustments to the code:

<q-input filled
                 v-model="loginData.password"
                 label="Votre mot de passe"
                 hint="Saisissez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="Required"
                 ref="fldPasswordChange">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
           </template>
       </q-input>
       <q-input filled
                 v-model="loginData.passwordConfirm"
                 label="Confirmez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="ConfirmPWD"
                 ref="fldPasswordChangeConfirm">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
           </template>
       </q-input>

Additionally, I adjusted the computed properties:

computed: {
            ConfirmPWD() {
                return [
                    (v) => !!v || "Saisissez quelquechose :-)",
                    (v) => v != this.$refs.fldPasswordChange.value || "Mots de passe différents"
                 ]
            },
            Required() {
                return [(v) => !!v || 'Saisissez quelque chose :-)']
            }
        },

However, the issue persists where the second control does not seem to trigger. If I leave the confirmPassword field empty, I receive an error message, but when I enter two different passwords, nothing happens. After debugging, I suspect there might be a syntax problem with my condition block when I include:

(v) => v != this.$refs.fldPasswordChange.value || "Mots de passe différents"

When this condition is present without (v) => !!v || "Saisissez quelquechose :-)", no error message is displayed.

Answer №1

To verify this condition, you can include it in the rules statement as shown below:

:rules="[val => val==loginData.password || 'Password is not matched']"

Answer №2

<q-input filled
             v-model="loginData.password"
             label="Enter your password"
             hint="Please enter your password"
             v-bind:type="isPwd ? 'password' : ''"
             lazy-rules
             v-bind:rules="Required"
             ref="fldPasswordChange">
        <template v-slot:append>
            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    v-on:click="isPwd = !isPwd"></q-icon>
        </template>
    </q-input>
    <q-input filled
             v-model="loginData.passwordConfirm"
             label="Confirm your password"
             v-bind:type="isPwd ? 'password' : ''"
             lazy-rules
             v-bind:rules="ConfirmPWD"
             ref="fldPasswordChangeConfirm">
        <template v-slot:append>
            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    v-on:click="isPwd = !isPwd"></q-icon>
        </template>
    </q-input>

and

computed: {
            ConfirmPWD() {
                return [
                    (v) => !!v || "Please enter something :-)",
                    (v) => v == this.$refs.fldPasswordChange.value || "Passwords do not match"
                 ]
            },
            Required() {
                return [(v) => !!v || 'Please enter something :-)']
            }
        },

There was a misunderstanding in the first part... I need to use the correct expressions for error messages, not conditions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Acquiring backend information to display in front-end using ReactJS

I receive data from the backend to present it in the following font: componentDidMount() { const response = this.props.store.privateImputationData; console.log(response); } When I check the console, it shows null. However, if I use a setTimeout, it w ...

What is the reason behind being limited to sending only 5 requests if I fail to heed the data event?

I've come across some related questions while researching this topic, such as Why is node.js only processing six requests at a time?. However, I am still struggling to fully grasp the specifics. Below is a breakdown of my scenario: Firstly, let&apos ...

I am attempting to integrate a datetimepicker onto my website, but I keep encountering an error. Can

Once upon a time, my website had a perfectly functioning datetimepicker. However, one day it suddenly stopped working. After some investigation, I realized that the JavaScript file I was referencing had been taken down. Determined to fix the issue, I visit ...

I noticed that my regular expression is functioning correctly on regex101, but for some reason, it's

My search works perfectly on regex101 using this link: https://regex101.com/r/z8JCpv/1 However, in my Node script, the third matched group array[2] is returning not only the matching text but also everything following it. An example line from the source ...

The challenge of Angular form data binding

I'm encountering an issue with binding an input box to a controller in Angular. Despite following tutorials, the model never updates when I access the property or check the scope using AngularJS Batarang. Upon form submission, $scope.licenceKey remai ...

Sending the image's identification number as a parameter to a function and showing the total number

On a static page, I have the following HTML markup: <div class="middle-content"> <div class="white-div"> <div class="like-buttons"> <img id="1" src="up.png" onclick="onClick(true, this.id)" /> &l ...

Tips for passing a parameter to getters in vue

I've implemented a getter in my application to verify the stock availability and amount of products in the cart. Below is the code for my getters.js: export const checkStock = (state, productID) => { let stockAvailable = true; state.cart.fo ...

Just a simple canvas animation

My canvas animation consists of two rectangles moving in different directions, but I believe it can be simplified further. http://jsfiddle.net/tmyie/R5wx8/6/ var canvas = document.getElementById('canvas'), c = canvas.getContext('2d&apo ...

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...

Combine all div elements to create a unified image and then proceed to save it as a jpg file before uploading to the server

These are the divs below: <div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url('https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallp ...

Using Jquery ajax, I am interested in storing a single value into a variable for future use in JavaScript

I'm finally able to retrieve a JSON Get request, but I'm struggling with utilizing the information effectively. The array contains 9 items, but I only need one specific value - the id. I want to extract this id and save it in a variable for futur ...

Function for Duplicating jQuery Events

I'm currently facing an issue where every time the browser is resized, a function is triggered. This function can turn a side panel into an accordion if the screen width meets certain criteria, or it can just display as an open side panel on larger sc ...

Mastering the art of binding values within nested JSON structures

I am looking to establish two-way binding with my JSON data, so that when a value changes in an input field, it will also update the corresponding value in the 'data' section. I believe using the 'bind' directive is the best way to achi ...

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm having trouble accessing the fileHandler object from my logger in order to flush the buffer to the file. This is the program I am working with: import * as log from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

Which function offers quicker rendering: fillRect() or the combination of moveTo(), lineTo(), and stroke()?

I am currently working with a legacy code where the timeline for a video is rendered using Canvas instead of DOM rendering, as it is believed to be faster. The original code used the fillRect() method, but was later changed to a combination of moveTo(), li ...

Error message from Meteor-Now deployment: "sh: meteor command not found"

I'm encountering issues deploying my meteor app with meteor-now. I followed a tutorial here, and also attempted deployment using ZEIT's OSX Client, but I keep getting the same error. Is there a workaround that anyone can suggest? Edit 1: H ...

Learn how to effortlessly integrate and utilize a bpmn file in a Vue component by leveraging the raw-loader

As a newcomer to bpmn-js, I am facing the challenge of importing and utilizing a .bpmn file within a vue.js component (BPMNViewer.vue). Despite my efforts in researching, I could only find recommendations to use the raw-loader. Consequently, I am currently ...

Ways to alter the color of offspring

Can you provide guidance on how to leverage Vue.js and/or SCSS in order to implement logic that changes the color based on the data-level (ranging from 1 to 6) of child divs? There is a jQuery example already implemented. Check out my jsfiddle here . ...

Develop a dynamic button using JavaScript to fetch information from an array

I'm struggling with incorporating this button creation code into my HTML using JavaScript. The code for creating the button element in JS file looks like this: var numery = ['A','B','C']; var numer = document.createE ...

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

I am facing challenges in retrieving the accurate data for display from Mat-Select and Mat-Checkbox components. My goal is to capture the selected values from users and perform if-else statements to validate conditions, displaying the correct data view if ...