I currently have 2 input fields side by side that need to be validated using vee-validate in my Vue.js application.
https://i.sstatic.net/xOZT2.png
The validation error message is appearing at the end of the input-group instead of within it.
https://i.sstatic.net/taLI0.png
Below is the HTML code snippet:
<div class="form-group row d-flex justify-content-center">
<div class="input-group input-group-lg col-md-3" >
<input v-validate="'required'" name="username" v-model="username" type="text" class="form-control" placeholder="Your Name" aria-label="Name">
<span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
</div>
<div class="input-group input-group-lg col-md-4" >
<input v-validate="'required|email'" name="email" v-model="email" type="text" :class="{'input': true, 'is-danger': errors.has('email') }" class="form-control" placeholder="Your Email Address" aria-label="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</div>
</div>
Can you spot what's incorrect in my code?