fix(ui): use inline validations

src/components/Controls/Base.vue

@@ -94,34 +94,12 @@ export default {
     triggerChange(value) {
       value = this.parse(value);
 
-      const isValid = this.validate(value);
-      if (!isValid) {
-        return;
-      }
-
       if (value === '') {
         value = null;
       }
 
       this.$emit('change', value);
     },
-    validate(value) {
-      if (!(typeof this.df.validate === 'function')) {
-        return true;
-      }
-
-      try {
-        this.df.validate(value, this.doc);
-      } catch (error) {
-        showMessageDialog({
-          message: this._('Invalid Value'),
-          description: error.message,
-        });
-        return false;
-      }
-
-      return true;
-    },
     parse(value) {
       return value;
     },

src/components/Controls/TableRow.vue

@@ -20,22 +20,29 @@
       v-for="df in tableFields"
       :df="df"
       :value="row[df.fieldname]"
-      @change="value => row.set(df.fieldname, value)"
-      @new-doc="doc => row.set(df.fieldname, doc.name)"
+      @change="(value) => onChange(df, value)"
+      @new-doc="(doc) => row.set(df.fieldname, doc.name)"
     />
+    <div
+      class="text-sm text-red-600 mb-2 pl-2 col-span-full"
+      v-if="Object.values(errors).length"
+    >
+      {{ getErrorString() }}
+    </div>
   </Row>
 </template>
 <script>
 import FormControl from './FormControl';
+import { getErrorMessage } from '../../utils';
 import Row from '@/components/Row';
 
 export default {
   name: 'TableRow',
   props: ['row', 'tableFields', 'size', 'ratio', 'isNumeric'],
   components: {
-    Row
+    Row,
   },
-  data: () => ({ hovering: false }),
+  data: () => ({ hovering: false, errors: {} }),
   beforeCreate() {
     this.$options.components.FormControl = FormControl;
   },
@@ -43,8 +50,28 @@ export default {
     return {
       doctype: this.row.doctype,
       name: this.row.name,
-      doc: this.row
+      doc: this.row,
     };
-  }
+  },
+  methods: {
+    onChange(df, value) {
+      if (value == null) {
+        return;
+      }
+
+      this.$set(this.errors, df.fieldname, null);
+      const oldValue = this.row.get(df.fieldname);
+      if (oldValue === value) {
+        return;
+      }
+
+      this.row.set(df.fieldname, value).catch((e) => {
+        this.$set(this.errors, df.fieldname, getErrorMessage(e, this.row));
+      });
+    },
+    getErrorString() {
+      return Object.values(this.errors).join(' ');
+    },
+  },
 };
 </script>

src/components/TwoColumnForm.vue

@@ -162,6 +162,7 @@ let TwoColumnForm = {
 
       let oldValue = this.doc.get(df.fieldname);
 
+      this.$set(this.errors, df.fieldname, null);
       if (oldValue === value) {
         return;
       }
@@ -171,9 +172,6 @@ let TwoColumnForm = {
         return this.doc.rename(value);
       }
 
-      // reset error messages
-      this.$set(this.errors, df.fieldname, null);
-
       this.doc.set(df.fieldname, value).catch((e) => {
         // set error message for this field
         this.$set(this.errors, df.fieldname, getErrorMessage(e, this.doc));

tailwind.config.js

@@ -53,6 +53,9 @@ module.exports = {
         lg: '0.5rem', // 8px
         xl: '0.75rem', // 12px
       },
+      gridColumn: {
+        'span-full': '1 / -1',
+      },
       colors: {
         brand: '#2490EF',
         'brand-100': '#f4f9ff',