Is there a simple way to validate my input?
I want to ensure that the input is not empty and a checkbox must be checked before enabling the submit button.
Currently, I have successfully bound the condition for the checkbox, but I'm unsure how to also bind the input.length != 0 condition.
Here's the current code:
<template>
<b-field grouped>
<b-input
placeholder="E-Mailadresse"
type="email"
icon-pack="far"
icon="envelope"
expanded
v-model="input"
>
</b-input>
<button class="button" @click="isActive = !isActive" :class="[checked ? 'is-success' : 'is-white is-outlined']" :disabled="!checked">Subscribe</button>
</b-field>
<div class="field">
<b-checkbox v-model="checked">
<p>We use the services of <a href="link to newsletter company">Newsletter</a> to send our newsletters. We need your email address to send you these newsletters. Please confirm that we are allowed to collect your data. For more information, refer to our <a href="link to privacy">Privacy Policy</a>.</p>
</b-checkbox>
</div>
<b-message title="Thank you!" type="is-success" has-icon :active.sync="isActive">
Your newsletter subscription has been successful. Please confirm the Double-Opt-In link in the confirmation email.
</b-message>
</template>
<script>
export default {
data () {
return {
checked: false,
isActive: false
}
}
}
</script>
I've heard that computed properties might help with this issue, but I haven't been able to make it work yet.
Any advice would be greatly appreciated!