I'm currently facing challenges while working on a form to enable a button when certain conditions are met.
The form I created includes fields for name, phone number, options, and a message. Once all requirements are filled, I aim to re-enable the disabled submit button.
Any advice on how to successfully re-enable the button for form submission?
<template>
<div class="contact">
<h1>We appreciate all questions you may have regarding this application!</h1>
<h2>Please leave a message below, and we will do our best to respond promptly!</h2>
</div>
<form @submit.prevent="submitForm">
<div class="form-control" :class="{invalid: fullNameValidation === 'invalid'}">
<label for="name">Name</label>
<input id="name" name="name" type="text" v-model="fullName" @blur="validateInput">
<p v-if="fullNameValidation === 'invalid'">Please enter your name.</p>
</div>
<div class="form-control" :class="{invalid: phoneValidation === 'invalid'}">
<label for="phone">Phone Number</label>
<input id="phone" name="phone" type="number" v-model="phoneNr" @blur="validatePhone" pattern="[0-9]*">
<p v-if="phoneValidation === 'invalid'">Please enter a valid phone number.</p>
</div>
<div class="form-control">
<label for="referrer">How did you hear about this application?</label>
<select id="referrer" name="referrer" v-model="referrer">
<option value="" disabled hidden>Select an option</option>
<option value="internet">Internet</option>
<option value="friends">Friends</option>
<option value="newspaper">Newspapers</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control" :class="{invalid: messageValidation === 'invalid'}">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" v-model="message" @blur="validateMessage"></textarea>
<p v-if="messageValidation === 'invalid'">Please enter your message.</p>
</div>
<div>
<button v-on:click="$router.push('thankyou')" :disabled="!isComplete" id="myBtn">Send Message</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
fullName: '',
fullNameValidation: 'pending',
phoneNr: 'null',
phoneValidation: 'pending',
referrer: '',
messageValidation: 'pending'
}
},
methods: {
submitForm() {
this.fullName = '';
},
validateInput() {
if (this.fullName === '') {
this.fullNameValidation = 'valid'
} else {
this.fullNameValidation = 'invalid'
}
},
validatePhone() {
if (this.phoneNr > 10) {
this.phoneValidation = 'valid'
} else {
this.phoneValidation = 'invalid'
}
},
validateMessage() {
if (this.messageValidation > 1) {
this.messageValidation = 'valid'
} else {
this.messageValidation = 'invalid'
}
},
computed: {
isComplete() {
return Object.values(this.fields).every(({valid}) => valid)
}
}
}
}
</script>