Guide to verifying the fourth character in the Vuejs confirm password field

    password field validation rules:
    <!-- Password -->
    <label class="form__group is-required">
      <span class="form__label">Password</span>
      <input
        class="form__input"
        type="password"
        name="form-password"
        v-model="password"
        @input="$v.password.$touch"
      />
      <p v-if="$v.password.$dirty">
        <span class="form__alert" v-if="!$v.password.required">Required.</span>
        <span class="form__alert" v-if="!$v.password.minLength">
          {{ $v.password.$params.minLength.min }} letters at least.
        </span>
      </p>
    </label>
    <!-- Repeat Password -->
    <label class="form__group is-required">
      <span class="form__label">Repeat<br />password </span>
      <input
        class="form__input"
        type="password"
        name="form-repeat-password"
        v-model="repeatPassword"
        @input="$v.repeatPassword.$touch"
      />
      <p v-if="$v.repeatPassword.$dirty">
        <span class="form__alert" v-if="!$v.repeatPassword.required"
          >Required.</span
        >
        <span class="form__alert" v-if="!$v.repeatPassword.sameAsPassword">
          Must be identical.
        </span>
      </p>
    </label>
    </div>
  </form>

confirm password validation rule:

I want to ensure confirm password matches the 4th character of the original password in Vuejs. Currently, it checks from the beginning and I tried using value.length < 5 but it did not work.

I have implemented vuelidate for input field validations.

https://codesandbox.io/s/stackoverflow-67111603-v9nfc?file=/src/components/HelloWorld.vue:2812-2958

Answer №1

In case you prefer not to show the validation message when repeatPassword has fewer than 4 characters (which is quite odd), simply include

&& repeatPassword.length >= 4
in your code like this.

<p v-if="$v.repeatPassword.$dirty && repeatPassword.length >= 4"> 
<!-- only display the validation when length >= 4 -->
  <span class="form__alert" v-if="!$v.repeatPassword.required"
    >Required.</span
  >
  <span class="form__alert" v-if="!$v.repeatPassword.sameAsPassword">
    Must be identical.
  </span>
</p>

https://codesandbox.io/s/stackoverflow-67111603-forked-hkew0?file=/src/components/HelloWorld.vue:1016-1088

Answer №2

Here's a straightforward approach using If()else{}

      watch: {
        repeatPassword(v) {
//checking repeat password length is 4 or greater than 4
          if(v.length >= 4){
//then checking if the repeat password matches the original password
            if(v === this.password){
              console.log('Passwords are the same')
            }else{
              console.log('Not the same password')
            }
          }else{
            console.log('Validation starts after Repeat password length reaches 4')
          }
        },
      },

See it in action here: live demo

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

Recreate body content with JQuery Mobile

I've been attempting to duplicate the entire HTML content within the tags. However, even though the appearance on screen is correct, none of the links are functioning.</p> <p>To view the fiddle, click here: [Here is a fiddle][1]</p> ...

Setting up a Laravel 9 project with Vuetify and Vite: A step-by-step guide

Question: I'm currently trying to incorporate Vuetify into my Laravel 9 project with Vite. Despite following the guidelines provided in the Vuetify documentation, I am facing issues with the styles not being applied. app.js import App from "./A ...

XMLHttpRequest Failing to Retrieve Data - Error Code 202

Currently, I am immersed in a project that involves using a webservice (specifically, VB.Net and Javascript). While debugging the code, I encountered an issue with the XmlHttpRequest.status returning as 202. Upon comparison with my previous webservice proj ...

Using NodeJS to generate a multipart/mixed response

I am faced with a particular situation: creating a multipart/mixed response in NodeJS with full control over the communication on both ends to avoid interoperability issues. A JSON file containing a list of nodes describing each ZIP file, for example: [{ ...

Pulling information from an iOS application to a MEVN application using a GET request

After successfully building a Vue.js Single Page Application with an Express/Node backend, I am now venturing into creating an iOS app that can interact with the same backend. When attempting to make POST requests from iOS (Xcode) to log in a user using A ...

Is it better to use scale.set() or simply increase the size of the model in Three.js?

When it comes to scaling 3D models in Three.js (or any other 3D renderers), what is considered the best practice? Recently, I encountered a situation where I loaded a model only to realize that its size was too small. In order to adjust the size, I used m ...

Is it possible to conceal JavaScript comments on a page before it is displayed?

Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...

Transform colored svg:image elements into grayscale when clicked upon by utilizing d3

Visit this site I'm attempting to change all SVG images created using d3.select to grayscale by using the following function: JavaScript: <script> function convert() { d3.selectAll("image") .style('filter', 'graysc ...

Tips for making a multi-dimensional array using jQuery

Is it possible to generate a jQuery layout by using two separate each statements as shown below? arrar [ 'aaa'=>'ccsdfccc', 'bb'=>'aaddsaaaa', '1'=>[ 'three'=>'sdsds& ...

Error encountered: Exceeded maximum update depth in Material UI Data Grid

Encountering an error or warning when inputting rows in the table that is causing the screen to freeze. Warning: Maximum update depth exceeded. This issue can arise when a component triggers setState within useEffect, but useEffect doesn't have a de ...

Sending data from configuration to factory in AngularJS and UI Router

Trying to perform a search in an http call with a dynamic value based on the current view. The factory setup is as follows: .factory('SearchService', ['$http','$filter', function($http, $filter) { var service = { get ...

"Automate the process of clicking on a specific part of a div element

I'm trying to extract data from this specific website: I've written the code to reach the simulation page, but I encounter an issue with a particular link. This dynamic link is causing me trouble when trying to access it. Clicking on that link ...

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

No spaces are being retrieved from the input field

After entering "test data" in the first input box and clicking the submit button, only "test" is displayed in another input box. The goal is to have "test data" appear in the script-generated input box as well. Sample HTML Code <input name="" type="te ...

Crosswalk code unable to detect electronic devices

The implementation of a rails application involves the following code snippet: <div id="sourceSelectPanel" style="display:none"> <label for="sourceSelect"& gt;Change video source:& lt;/label> <select id=" ...

What are the steps to modify the relative URL when using Express proxy?

To prevent the common CORS issue with client-side JavaScript code, I utilize a Node.js Express server. The server is configured with the following code: var app = express(); app.all('/Api/*', function (req, res) { proxy.web(req, res, { ...

Chess.js TypeScript declaration file for easy implementation

Currently, I am delving into learning typescript and have taken up the challenge of crafting a declaration file for the chess.js library. However, it seems that I am struggling to grasp the concept of creating one. Whenever I attempt to import the library ...

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

Error: Invalid character encountered during login script JSON parsing

I found this script online and have been experimenting with it. However, I encountered the following error: SyntaxError: JSON.parse: unexpected character [Break On This Error] var res = JSON.parse(result); The problem lies in the file below as I am unf ...

Issues with Vuetify visibility class functionalityStringReflects Challenges with the Visibility

As per the documentation found here, I'm attempting to utilize a Vuetify visibility class to hide an element on smaller screens. Unfortunately, when using the following class, it has the opposite effect - removing the element on larger screens and di ...