Как делать корректно валидацию полей после нажатия на кнопку submit, проверить заполнены ли поля все и их длина не больше например 30 символов. Проблема я не пойму как можно повесить полям два класса .is-invalid или .is-valid и как правильно выводить нужно ошибку под нужным полем.
new Vue({
el: '#app',
data() {
return {
article: {
id: '',
title: '',
body: ''
},
valid: false,
errors: {
title: "",
body: ""
}
}
},
methods: {
submitHandle() {
this.errors = [];
if (!this.article.title) {
this.errors.title = 'Title required';
} else if (this.article.title.length < 5) {
this.errors.title = 'Title must contain at least 5 characters';
} else {
this.errors.title = '';
}
if (!this.article.body) {
this.errors.body = 'Body required'
} else if (this.article.body.length < 5) {
this.errors.body = 'Body must contain at least 5 characters';
} else {
this.errors.body = '';
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form @submit.prevent="submitHandle">
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" v-model="article.title">
<div v-if="errors.title" class="invalid-feedback">{{errors.title}}</div>
</div>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Body" v-model="article.body"></textarea>
<div v-if="errors.body" class="invalid-feedback">{{errors.body}}</div>
</div>
<button class="btn btn-primary">Save</button>
</form>
</div>