[Vuejs]-How to disable button until email validated in Vuejs?

by

4👍

✅

There are two problems with your code

  1. A regex must not be enclosed in quotes ''

  2. Your isDisabled() function returns the wrong value, because it returns true if this.isEmailValid == true which is obviously wrong.

You can also simplify your logic, as your regex won’t match an empty string. Thus your isDisabled() can simply return the negated result of the regex test, ie return !/.../.test(this.email)

new Vue({
  el: '#app',
  data: {
    email: ''
  },
  computed: {
    isDisabled: function() {
      return !/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)

    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>
    <input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" />
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>

PS: You can add external scripts also to your code snippets, if you click on Add External scripts and input the url. Thus for simple cases, there is typically no need to link to external jsfiddles and you can keep your questions self-contained.

👤derpirscher

Leave a comment