I'm new to Vue.js and I'd like to check if passwords are matched. If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear. I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure vue.js?

/

<div id="app">
          <form >
          <div class="form-group">            
            <input type="email" class="form-control" placeholder="Email">            
          </div>
          <br>
          <div class="form-group">
            <input type="password" class="form-control" v-model="password" placeholder="Password">
          </div> 
          <br>

         <div class="form-group">
            <input type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
          </div>
          <small v-if="showError">Passwords don't match!</small>
          <br>

          <div class="form-group">

            <input type="text" class="form-control" placeholder="Age">            
          </div>         

           <br>

          <button type="submit" class="btn login-btn">Register</button>
        </form>
</div>

new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false    
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

I'm new to Vue.js and I'd like to check if passwords are matched. If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear. I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure vue.js?

https://jsfiddle/Babrz/L2md63j7/3/

<div id="app">
          <form >
          <div class="form-group">            
            <input type="email" class="form-control" placeholder="Email">            
          </div>
          <br>
          <div class="form-group">
            <input type="password" class="form-control" v-model="password" placeholder="Password">
          </div> 
          <br>

         <div class="form-group">
            <input type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
          </div>
          <small v-if="showError">Passwords don't match!</small>
          <br>

          <div class="form-group">

            <input type="text" class="form-control" placeholder="Age">            
          </div>         

           <br>

          <button type="submit" class="btn login-btn">Register</button>
        </form>
</div>

new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false    
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

• javascript
• vue.js

• 3 When do you want to show the user this information? When they submit the form? Or in real-time as they type? For the first, I'd use a @submit on the form that validates and alerts the user if there are issues. For the second, a puted property like passwordsMatch: function() { return this.password == this.password2; } and a v-if="!passwordsMatch" somewhere to display an error. – ceejayoz Commented Dec 20, 2018 at 16:11
• Well, I want the message to appear just after user leaves the password2 and gets to the next field. I don't want to bother them while they are typing, nor wait until the form is submitted. – Babr Commented Dec 20, 2018 at 16:15
• @ceejayoz you should make this ment an answer and add a focus test in the puted property ;) – papillon Commented Dec 20, 2018 at 16:25
• @Babr You could make your puted property check that something is in both fields, if you like. – ceejayoz Commented Dec 20, 2018 at 16:30

1 Answer 1

It sounds like you want to use an onblur event to run a validation on the two password values. A very basic implementation might look like this.

...

<input  v-on:blur="validate" type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
...

...
new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false
      
    

  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
    validate: function() {
        console.log(this.password === this.password2)
    }
  }
})
...

https://v2.vuejs/v2/guide/events.html

You can get a lot of help if you use something like validate.js to validate your passwords too.

http://validatejs