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

Exploring Next.js with getServerSideProps

Vue Js error message: The following dependency could not be found: * core-js/fn/promise

Reasons why the Express Route fails to store cache while executed in a separate file

Alert displayed on console during transition from MaterialUI lab

Convert XML data into a structured table format

Facing an obstacle in Angular as I am unable to view my data

Experiencing Excessive Recursion While Dynamically Attaching Click Event Listener With Post Method to a Div Element

Establish a global variable within the utils.js module in a Node.js environment

Steps to releasing JavaScript and asset files on npm

Utilizing Axios GET Method with Authorization Header in a Vue Application

What is the process for "dereferencing" an object?

There was an error during product validation that occurred in the userId field. In the Node.js application, it is required to

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

There seems to be an issue with AJAX file uploading functionality in Django

Vue form mysteriously invisible

The overlay feature in Vuetify 3 seems to be malfunctioning following the migration from Vue 2

How to handle and display validation errors in an AJAX post request using express-validator in Node.js/Express

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Unable to set options, such as the footer template, in Angular UI Typeahead

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected