Add validation hints on interact fields (#418)

src/components/schema/schemaForm/SchemaForm.vue

@@ -28,7 +28,7 @@
               <Michelson v-on="on" :code="value" mutable></Michelson>
             </div>
           </template>
-          <template slot="custom-nat" slot-scope="props">
+          <template slot="custom-bytes" slot-scope="props">
             <v-text-field
               :key="props.fullKey"
               :ref="props.fullKey"
@@ -37,8 +37,34 @@
               dense
               outlined
               :value="props.value"
+              :rules="rules.bytes"
               :placeholder="props.label">
             </v-text-field>
+          </template>
+           <template slot="custom-nat" slot-scope="props">
+            <v-text-field
+              :ref="props.fullKey"
+              :label="props.label"
+              v-on="props.on"
+              dense
+              outlined
+              :value="props.value"
+              :rules="rules.nat"
+              :placeholder="props.label">
+            </v-text-field>
+          </template>
+          <template slot="custom-address" slot-scope="props">
+            <v-text-field
+                :ref="props.fullKey"
+                :label="props.label"
+                v-on="props.on"
+                dense
+                outlined
+                :value="props.value"
+                :placeholder="props.label"
+                :rules="rules.address"
+            >
+            </v-text-field>
           </template>
           <template slot="custom-contract" slot-scope="props">
             <v-text-field
@@ -52,6 +78,7 @@
                 :placeholder="props.label"
                 :hint="schema.properties[props.modelKey] && schema.properties[props.modelKey].tag ? `\'Fill\' button finds the newest contract with this contract type. If contract's absent nothing is set.` : ``"
                 persistent-hint
+                :rules="rules.contract"
             >
               <template v-slot:append-outer v-if="schema.properties[props.modelKey] && schema.properties[props.modelKey].tag">
                 <v-btn text small @click="$emit('getRandomContract', props)" class="text--secondary">
@@ -91,7 +118,8 @@
 import SchemaOptionalSettings from "./SchemaOptionalSettings";
 import SchemaFormExecutionActions from "./SchemaFormExecutionActions";
 import Michelson from "@/components/Michelson";
-
+import { isKT1Address, isTzAddress } from "@/utils/tz.js";
+ 
 export default {
 name: "SchemaForm",
   components: {
@@ -139,6 +167,24 @@ name: "SchemaForm",
     return {
       selectedFillType: 'empty',
       model: {},
+      rules: {
+        contract:[
+          v => v.length == 36 || 'The length of the contract address is 36 characters',
+          v => isKT1Address(v) || 'In this field you should write the address of the contract. It begins with KT.'
+        ],
+        nat: [
+          v => /^\d+$/.test(v) || 'Only digits are allowed',
+          v => v.length > 2 && v[0] !== '0' || "Nat can't starts from zero"
+        ],
+        bytes: [
+          v => v.length % 2 == 0 || "The length of the byte string must be even",
+          v => /^[0-9a-fA-F]*$/.test(v) || 'Only 0-9 and a-f are allowed',
+        ],
+        address: [
+          v => v.length == 36 || 'The length of the address is 36 characters',
+          v => isTzAddress(v) || isKT1Address(v) || 'In this field you should write the address'
+        ]
+      }
     };
   },
 }

src/utils/styles.js

@@ -19,6 +19,12 @@ export function applyStyles(node) {
         if (node.prim === "nat" || node.prim === "mutez") {
             node["x-display"] = "custom-nat"
         }
+        if (node.prim === "bytes") {
+            node["x-display"] = "custom-bytes";
+        }
+        if (node.prim === "address") {
+            node["x-display"] = "custom-address";
+        }
     }
     if (node.properties) {
         for (var prop in node.properties) {