Difficulty encountered in altering button color when the password and confirm password fields are the same in a Vue.js project?

Question

Difficulty encountered in altering button color when the password and confirm password fields are the same in a Vue.js project?

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="[equal && !empty ? 'empty' : 'no-empty']" :disabled="!equal || empty">Send</button>
                      < /div>

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

The issue is in the confirmPassword field - if I enter a single character only, it is changing the color of the button. I need it to only change the button color if the password and confirm password match, otherwise show a different color.

javascript vue.js

Answer 1

Answer №1

Method 1 - Template Styling Without Functions

Step 1: The HTML template will include:

<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: Include the following scripts:

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

Step 3: Apply styles as shown 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>

Method 2 - Using Function Handler in HTML template

Step 1: Update the HTML template as follows

<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: Adjust the script section with the function handler

<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: Remember to update the styles accordingly

<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:
  
  display: none!;
}

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

Both these methods are effective, and you can view a demo here

Answer 2

Method 1 - Template Styling Without Functions

Step 1: The HTML template will include:

<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: Include the following scripts:

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

Step 3: Apply styles as shown 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>

Method 2 - Using Function Handler in HTML template

Step 1: Update the HTML template as follows

<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: Adjust the script section with the function handler

<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: Remember to update the styles accordingly

<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:
  
  display: none!;
}

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

Both these methods are effective, and you can view a demo here

Answer 3

Answer №2

It seems like you are looking to change the color only when both password values are not empty and are equal, is that right?

If that's the case, your ternary condition is currently only checking for empty, not equal. You can simply adjust the condition in your template like this:

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

You can apply the same update to the :disabled attribute condition if needed.

Answer 4

It seems like you are looking to change the color only when both password values are not empty and are equal, is that right?

If that's the case, your ternary condition is currently only checking for empty, not equal. You can simply adjust the condition in your template like this:

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

You can apply the same update to the :disabled attribute condition if needed.

Difficulty encountered in altering button color when the password and confirm password fields are the same in a Vue.js project?

Answer №1

Answer №2

Similar questions

Several queries for directions on Google Maps are resulting in the same response being returned for all requests

What is the best way to implement ES2023 functionalities in TypeScript?

Automatically Access a JS/CSS File in the Developer Tools 'Sources' Section

Jasmine is having trouble scrolling the window using executeScript

Different results can be observed when comparing the array ordering in JavaScript between IE8 and Chrome

The Datatable is only displaying a single record

Identify the CSS class for the ionic component on the webpage

React - The content of my JSON.String vanishes upon being placed inside a div element

Guide to converting an arraylist of custom objects into JSON using JavaScript

Tips for accessing user-defined headers within CORS middleware

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

My WordPress loadmore function is not providing any additional posts

JS Function created to supply elements to React component is failing to return correctly

forEach`` binding in knockout object

error": "Unable to access undefined properties (reading 'SecretString')

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

Error encountered in jsonwebtoken payload

Is the 404 error a result of the ajax code?

Issue with OBJLoader showing a blank screen