Я пытаюсь использовать несколько форм с проверкой VeeValidate на одном и том же компоненте Vue, но безуспешно.Я пытался ограничить валидацию конкретными областями, но, похоже, она их не распознает.Первый вид (регистрация с 4 полями) работает нормально.Однако, если вы перейдете к представлению входа в систему, проверка не будет отображаться там, а перенесется на первые два поля представления регистрации).Любая помощь будет принята с благодарностью.
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')
}
});
},
}
});