new Vue({
el: '#app',
data() {
return {
terms: false,
fullname:'',
maxfullname: 10,
mobile: '',
maxmobile: 10,
area: '',
maxarea: 12,
city: '',
maxcity: 12,
};
},
computed: {
isDisabled: function(){
return !this.terms || !this.fullname || !this.mobile || !this.area || !this.city;
}
}
})<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms'/> I agree to the terms and conditions.
<input id="fullname" type='text' v-model='fullname' :maxlength="maxfullname"/> Full Name
<input id="mobile" type='text' v-model='mobile'/ :maxlength="maxmobile"> Mobile Number
<input id="area" type='text' v-model='area' :maxlength="maxarea"/> Area
<input id="city" type='text' v-model='city':maxlength="maxcity"/> City
</label>
</p>
<button :disabled='isDisabled'>Submit Form</button>
</div>I am currently experiencing an issue where the button becomes enabled if I enter 2 or 3 characters in each field and click on it. However, I would like the button to only become enabled when the user enters the maximum number of characters allowed in all fields.