I'm trying to use multiple forms with VeeValidate validation on the same Vue component and not having any luck. I've tried limiting validation to specific scopes but it doesn't seem to be recognizing them. The first view (register with 4 fields) works fine. However, if you click over to the login view, the validation doesn't show there but carries over to the first two fields of the register view). Any help would be greatly appreciated.
https://codepen.io/admrbsn/pen/qGrEqz
HTML:
<div id="mainContainer">
<!-- Join -->
<div v-if="!showLogIn">
<h5>Join</h5>
<p>Already have an account? <span v-on:click="showLogIn = true">Log in here</span></p>
<form @submit.prevent="validateAndJoin('join')" data-vv-scope="join">
<label for="first_name">First Name</label>
<input v-model="visitor.first_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.first_name') }" id="first_name" name="first_name" data-vv-as="first name" placeholder="Your first name"
autocomplete="off" />
<div v-show="errors.has('join.first_name')" class="invalid-feedback">{{ errors.first('join.first_name') }}</div>
<label for="last_name">Last Name</label>
<input v-model="visitor.last_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.last_name') }" id="last_name" name="last_name" data-vv-as="last name" placeholder="Your last name"
autocomplete="off" />
<div v-show="errors.has('join.last_name')" class="invalid-feedback">{{ errors.first('join.last_name') }}</div>
<label for="emailAddress">Email Address</label>
<input v-model="visitor.emailAddress" v-validate="'required|email'" type="email" :class="{'input': true, 'is-invalid': errors.has('join.emailAddress') }" id="emailAddress" name="emailAddress" data-vv-as="email address"
placeholder="Your email address" autocomplete="off" />
<div v-show="errors.has('join.emailAddress')" class="invalid-feedback">{{ errors.first('join.emailAddress') }}</div>
<label for="password">Password</label>
<input v-model="visitor.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('join.password') }" id="password" name="password" data-vv-as="password" autocomplete="off" />
<div v-show="errors.has('join.password')" class="invalid-feedback">{{ errors.first('join.password') }}</div>
<button type="submit">Join</button>
</form>
</div>
<!-- Log in -->
<div v-if="showLogIn">
<h5>Log in to Peterson's</h5>
<p>Need an account? <span v-on:click="showLogIn = false">Join</span></p>
<form @submit.prevent="validateAndLogIn('login')" data-vv-scope="login">
<label for="loginEmail">Email address</label>
<input v-model="user.email" v-validate="'required'" type="email" :class="{'input': true, 'is-invalid': errors.has('login.loginEmail') }" id="loginEmail" name="loginEmail" data-vv-as="email address" placeholder="Your email address"
autocomplete="off">
<div v-show="errors.has('login.loginEmail')" class="invalid-feedback">{{ errors.first('login.loginEmail') }}</div>
<label for="loginPassword">Password</label>
<input v-model="user.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('login.loginPassword') }" id="loginPassword" name="loginPassword" data-vv-as="password" placeholder="Your password"
autocomplete="off">
<div v-show="errors.has('login.loginPassword')" class="invalid-feedback">{{ errors.first('login.loginPassword') }}</div>
<button type="submit">Log in</button>
</form>
</div>
</div>
Vue:
Vue.use(VeeValidate);
var main = new Vue({
el: "#mainContainer",
props: {
showLogIn: false
},
data() {
return {
user: {
email: '',
password: ''
},
visitor: {
first_name: '',
last_name: '',
emailAddress: '',
password: ''
}
}
},
methods: {
validateAndJoin(scope) {
this.$validator.validateAll(scope).then(result => {
if (result) {
console.log('Submitted')
}
});
},
validateAndLogIn(scope) {
this.$validator.validateAll(scope).then(result => {
if (result) {
console.log('Submitted')
}
});
},
}
});