Search code examples
vue.jsvuelidate

Vuelidate name in Vuejs?


 fullname: '',
 max: 30,
  fullname: { required, minLength: minLength(30), maxLength: maxLength(29) },
  
    computed: {
    isDisabled: function(){

      return !this.terms  || (this.fullname.length  < this.max) || (this.mobile.length < this.maxmobile)
      || (this.gstin.length < this.maxgstin) || (this.email.length < this.maxemail);
      
      
  },
<input
type="text"
id='fullname'  v-model='fullname'
v-model.trim="$v.fullname.$model"
:class="{ 'is-invalid': validationStatus($v.fullname) }"
class="input-section"
:maxlength="max"
v-on:keypress="isLetter($event)"
placeholder="Enter your name"
/>

<button class="register-button":disabled='isDisabled'
v-on:click=" isFirstScreen">PROCEED</button>

if i keep condition for maxfullname=10, then after entering 10 characters only button is enabling. But i need as maxlength should be 30 characters for fullname, and even if user enter lessthan 30 characters(either 10,5,6....etc) then also button has to enable.


Solution

  • fullname: { required, maxLength: maxLength(29) },
    computed: {
    isDisabled: function() {
      return !this.terms  || (this.fullname  < this.max) || (this.mobile.length < this.maxmobile)
      || (this.gstin.length < this.maxgstin) || (this.email.length < this.maxemail);
    },