How to disable submit button based on error validation for input field in vuejs?

Question

 computed: {
    isDisabled: function(){

      return 
      !(this.errmsg.email < this.email.minemail) 
      
      }
      
 watch: {
      
    email(value){
    // binding this to the data value in the email input
    
    this.email = value;
  
  
// eslint-disable-next-line
    console.log("email",this.email);
    this.validateEmail(value);
    }
    },
    
    
    
   methods: {

 

      validateEmail(value) {
        // eslint-disable-next-line
      console.log("email",this.email,value);
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
        {
        this.errmsg['email'] = '';
        } else{
        this.errmsg['email'] = 'Invalid Email Address';
        }
        },
     }

<input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID" :maxlength="maxemail" id='email'  v-model='email'  />

 <div v-if="errmsg.email"  class="invalid-feedback-register">
 {{errmsg.email}} 
 </div>
 
  <button type="submit" :class="(isDisabled) ? '' : 'selected'"
 :disabled='isDisabled'  v-on:click=" isFirstScreen"  @click="persist"      >PROCEED</button>

Using watch to handle email input field for validation and it is working fine, But the issue is when trying to disable button based on {{errmsg.email}} its not working.

If email is valid, enable button , otherwise disabled untill user enters correct email id in the field.

Checkout my answer with demo link https://stackoverflow.com/questions/66410174/vuelidate-password-and-confirm-password-in-vuejs/66668526#66668526 — Jebasuthan, Mar 18 '21 at 07:17
Its like normally disabling the button for the input fields, but i need as Based on the error validation disabling the button — T dhanunjay, Mar 18 '21 at 07:26

score 0 · Accepted Answer · answered Mar 18 '21 at 07:26

In your code there are some mistakes, why are you checking this.errmsg.email < this.email.minemail, I didn't get why less than < sign is there.

Also, why you need to watch every email id change, just use "input" event and it will do the same job on email change.

I modified the code below, as per what I understand from seeing the variables that you provided above.

<template>
  <div> 
    <input type="text" v-validate="'required'" name="email" placeholder="Enter your company email ID" @input="validateEmail" :maxlength="maxemail" id='email' v-model="email"  />

    <div v-if="errmsg.email"  class="invalid-feedback-register">
    {{errmsg.email}} 
    </div>
    
      <button type="submit" :class="(isDisabled) ? '' : 'selected'"
    :disabled="isDisabled" @click="persist">PROCEED</button>   
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: null,
      errmsg: { email: '' },
      maxemail: 60
    }
  },
  computed: {
    isDisabled () {
      return (!this.email || this.errmsg.email !== '')
    }
  },
  methods: {
    validateEmail() {
      // eslint-disable-next-line
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
        this.errmsg.email = ''
      } else this.errmsg['email'] = 'Invalid Email Address';
      
    },
    persist () {

    }
  }
}

How to disable submit button based on error validation for input field in vuejs?

1 Answers1