show errors on form category

src/classes/field-types/category/FormCategory.vue

@@ -2,13 +2,16 @@
     <section
             v-if="isReady"
             :listen="setError">
-        <b-field :label="$i18n.get('label_select_category')">
+        <b-field :label="$i18n.get('label_select_category')"
+                 :type="taxonomyType"
+                 :message="taxonomyMessage"
+        >
             <b-select
                     name="field_type_options[taxonomy_id]"
                     placeholder="Select the taxonomy"
                     v-model="taxonomy_id"
                     @input="emitValues()"
-                    @change.native="emitValues()"
+                    @focus="clear"
                     :loading="loading">
                 <option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
                 <option
@@ -110,7 +113,13 @@
                 }
             },
             setError(){
-
+                if( this.errors && this.errors.taxonomy_id !== '' ){
+                    this.taxonomyType = 'is-warning';
+                    this.taxonomyMessage = this.errors.taxonomy_id;
+                } else {
+                    this.taxonomyType = '';
+                    this.taxonomyMessage = '';
+                }
             }
         },
         data(){
@@ -123,6 +132,8 @@
                 input_type: 'tainacan-category-radio',
                 multiple_types: {},
                 single_types: {},
+                taxonomyType:'',
+                taxonomyMessage: ''
             }
         },
         methods: {
@@ -146,6 +157,10 @@
             labelNewTerms(){
                 return ( this.allow_new_terms === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
             },
+            clear(){
+                this.taxonomyType = '';
+                this.taxonomyMessage = '';
+            },
             emitValues(){
                 this.$emit('input',{
                     taxonomy_id: this.taxonomy_id,

src/classes/field-types/relationship/FormRelationship.vue

@@ -2,7 +2,7 @@
     <section>
         <b-field
                 :label="$i18n.get('label_collection_related')"
-                :listen="setError()"
+                :listen="setError"
                 :type="collectionType"
                 :message="collectionMessage">
             <b-select
@@ -83,7 +83,9 @@
                 hasFields: false,
                 loadingFields: false,
                 modelRepeated: 'yes',
-                modelSearch:[]
+                modelSearch:[],
+                collectionType: '',
+                collectionMessage: ''
             }
         },
         watch:{
@@ -117,6 +119,17 @@
                this.modelRepeated = this.value.repeated;
            }
         },
+        computed: {
+            setError(){
+                if( this.errors && this.errors.collection_id !== '' ){
+                    this.collectionType = 'is-warning';
+                    this.collectionMessage = this.errors.collection_id;
+                } else {
+                    this.collectionType = '';
+                    this.collectionMessage = '';
+                }
+            },
+        },
         methods:{
             fetchCollections(){
                 return axios.get('/collections')
@@ -185,20 +198,9 @@
             labelRepeated(){
                 return ( this.modelRepeated === 'yes' ) ? this.$i18n.get('label_yes') : this.$i18n.get('label_no');
             },
-            setError(){
-                if( this.errors && this.errors.collection_id !== '' ){
-                    this.collectionType = 'is-warning';
-                    this.collectionMessage = this.errors.collection_id;
-                } else {
+            clear(){
                 this.collectionType = '';
                 this.collectionMessage = '';
-                }
-            },
-            clear(){
-                if( this.errors && this.errors.collection_id ){
-                    this.errors.collection_id = '';
-                }
-
             },
             emitValues(){
                 this.$emit('input',{