Problem while changing button color if password and confirmpassword fields are matched in vuejs?

Question

password: '',
confirmPassword: '',

computed: {
    empty() {
      return this.user.password === '' || this.user.confirmPassword === '';
    },
    equal() {
      return this.user.password === this.user.confirmPassword;
    }
  }

 .empty {
          width: 160px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          color: #fff;
          background-color: #f68e91;
          border-radius: 10px;
          margin-top: 15px;
          padding: 0 20px;
          cursor: pointer;
          opacity: 0.5; 
          display: flex;
          justify-content: center;
          align-items: center;
          outline: none;
          border: none;
        }
        
        .no-empty {
          opacity: 1.5;
background-color: #ee1d24;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="user.password" type="text">
  <input v-model="user.confirmPassword" type="text">
  <button  :class="[empty ? 'empty' : 'no-empty']" :disabled="empty">Send</button>
</div>

For the above code, i am able to change color of button if fields are empty, and if filled are not empty changing color.

But issue is in the confirmPassword field if i enter single character only it is changing color of button.I need as if password and confirm password is match only change button color, else different color.

Jebasuthan · Accepted Answer · 2021-03-19T06:42:36.967

Approach 1 - With in template styling without functions

Step 1: HTML template will be

<div id="app">
<input v-model="user.password" type="text" />
<input v-model="user.confirmPassword" type="text" />
<button :class="user.password && user.confirmPassword && user.password === user.confirmPassword  ? 'match' : 'nomatch'" :disabled="empty">
  Send
</button>

Step 2: Scripts will be

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        password: "",
        confirmPassword: "",
      },
    };
  },
  computed: {
    empty() {
      return this.user.password === "" && this.user.confirmPassword === "";
    },
  },
};

Step 3: Styles like below

<style>
.nomatch {
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #f68e91;
  border-radius: 10px;
  margin-top: 15px;
  padding: 0 20px;
  cursor: pointer;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
}

.match {
  opacity: 1.5;
  background-color: #ee1d24;
}
</style>

Approach 2 - HTML template With function handler

Step 1: HTML template like below

<div id="app">
<input v-model="user.password" type="text" />
<input v-model="user.confirmPassword" type="text" />
<button :class="this.matchPassword() ? 'match' : 'nomatch'" :disabled="empty">
  Send
</button>

Step 2: Scripts will be

  <script>
  export default {
    name: "App",
    data() {
      return {
        user: {
          password: "",
          confirmPassword: "",
        },
      };
    },
    computed: {
      empty() {
        return this.user.password === "" && this.user.confirmPassword === "";
      },
    },
    methods: {
      matchPassword() {
        if (
          this.user.password &&
          this.user.confirmPassword &&
          this.user.password === this.user.confirmPassword
        ) {
          return true;
        } else {
          return false;
        }
      },
    },
  };
</script>

Step 3: Styles

<style>
.nomatch {
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #f68e91;
  border-radius: 10px;
  margin-top: 15px;
  padding: 0 20px;
  cursor: pointer;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
}

.match {
  opacity: 1.5;
  background-color: #ee1d24;
}
</style>

Both the approaches will works fine. Please find the demo link below

DEMO

Its working fine, I am having :disabled="user.password && !$v.user.password.valid || user.confirmPassword && !$v.user.confirmPassword.sameAsPassword " where it will check for alphanumeric regex conditions if matching only it will proceed — T dhanunjay, Mar 19 '21 at 06:50
Now from the Aapproach1 code, if i enter aaaa and aaaa button color is changing,Now from the above change , if i enter aaaa and aaaa button color is changing. But want to proceed if :disabled="user.password && !$v.user.password.valid || user.confirmPassword && !$v.user.confirmPassword.sameAsPassword " if this matches — T dhanunjay, Mar 19 '21 at 06:51
@taneerudhanunjay both passwords are matching then we are changing the button color. — Jebasuthan, Mar 19 '21 at 06:56
@taneerudhanunjay Check the link below. This is what you wanted? https://stackoverflow.com/questions/66688532/password-validate-with-vuelidate-in-vuejs/66689801#66689801 — Jebasuthan, Mar 19 '21 at 07:15
What i am supposed to do is, If i try to enter any random equal password, then color will be empty, And if it Only alphanumeric values then non-empty. I have updated my code, Can you please check, it will be really helpful for me. Thanks https://codesandbox.io/s/amazing-moon-mw43w?file=/src/App.vue — T dhanunjay, Apr 18 '21 at 04:47
@taneerudhanunjay I created new demo link. https://codesandbox.io/s/vue-password-validation-sdzjk. Hope this would resolve your issue. If it helps you give a Thumbs Up to the answer. Check the link and let me know. — Jebasuthan, Apr 20 '21 at 05:31

score 0 · Answer 2 · answered Mar 19 '21 at 06:19

0

If I understand correctly, you want the color to only change if both password values are non empty and equal, correct?

If so, your ternary condition only evaluates empty not equal. Just update the condition in your template:

<button :class="[empty || !equal ? 'empty' : 'no-empty']" :disabled="empty">Send</button>

You can also update the :disabled attribute condition the same way if you want.

answered Mar 19 '21 at 06:19

Elfayer

4,411
9
46
76

What i am supposed to do is, If i try to enter any random equal password, then color will be empty, And if it Only alphanumeric values then non-empty. I have updated my code, Can you please check, it will be really helpful for me. Thanks https://codesandbox.io/s/amazing-moon-mw43w?file=/src/App.vue – T dhanunjay Apr 18 '21 at 04:46

Problem while changing button color if password and confirmpassword fields are matched in vuejs?

2 Answers2