Validate form with at least one tag, improve validation.
--- a/src_js/iconolab-bundle/src/components/editor/Tooltip.vue Fri Mar 17 18:17:07 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Tooltip.vue Mon Mar 20 12:26:06 2017 +0100
@@ -4,17 +4,19 @@
<button @click="close" type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
- <div class="form-group" v-bind:class="titleFormGroup" style="clear: both;">
+ <div class="form-group" v-bind:class="titleFormGroupClass" style="clear: both;">
<label class="control-label">Titre</label>
- <input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court">
+ <input name="title" v-model="title" type="text" class="form-control input-sm" placeholder="Donnez un titre court" @input="titleError = false">
+ <span class="help-block small" v-show="titleError">Vous devez spécifier un titre</span>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<textarea name="description" v-model="description" class="form-control input-sm" placeholder="Décrivez ce que vous voyez"></textarea>
</div>
- <div class="form-group">
+ <div class="form-group" v-bind:class="tagsFormGroupClass">
<label class="control-label">Mots-clés</label>
- <tag-list ref="taglist" v-bind:original-tags="originalTags"></tag-list>
+ <tag-list ref="taglist" v-bind:original-tags="originalTags" @change="tagsError = false"></tag-list>
+ <span class="help-block small" v-show="tagsError">Vous devez spécifier au moins un mot-clé</span>
</div>
<button @click="save" class="btn btn-block btn-sm btn-primary">Valider</button>
</form>
@@ -39,13 +41,19 @@
title: '',
description: '',
tags: [],
- error: false
+ titleError: false,
+ tagsError: false
}
},
computed: {
- titleFormGroup: function() {
+ titleFormGroupClass: function() {
return {
- 'has-error': this.error
+ 'has-error': this.titleError
+ }
+ },
+ tagsFormGroupClass: function() {
+ return {
+ 'has-error': this.tagsError
}
}
},
@@ -56,11 +64,6 @@
if (this.originalDescription) {
this.description = this.originalDescription;
}
- this.$on('error', (err) => {
- if (err.title) {
- this.error = true;
- }
- });
},
methods: {
close: function(e) {
@@ -70,11 +73,17 @@
save: function(e) {
e.preventDefault();
- this.error = false;
+ Object.assign(this, {
+ titleError: false,
+ tagsError: false,
+ });
if (this.title.trim().length === 0) {
- this.$emit('error', {
- title: true
- });
+ this.titleError = true;
+ }
+ if (this.$refs.taglist.tags.length === 0) {
+ this.tagsError = true;
+ }
+ if (this.titleError || this.tagsError) {
return;
}