ayanova/src/views/inventory-widget-edit.vue

@@ -1,16 +1,15 @@
 <template>
   <v-layout v-if="this.formReady">
     <v-flex>
-      <form>
+      <form ref="form">
         <v-layout align-center justify-left row wrap>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
               v-model="obj.name"
               :counter="255"
               :label="this.$gzlocale.get('WidgetName')"
-              :rules="[this.$gzv.Max255('WidgetName',obj.name),this.$gzv.Required('WidgetName',obj.name)]"
-              name="name"
-              required
+              :rules="[this.$gzv.Max255('WidgetName',obj.name)]"
+              ref="name"
             ></v-text-field>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
@@ -19,8 +18,7 @@
               :counter="10"
               :label="this.$gzlocale.get('WidgetSerial')"
               :rules="[this.$gzv.MaxLength('WidgetSerial',obj.serial,10)]"
-              name="serial"
-              required
+              ref="serial"
             ></v-text-field>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
@@ -28,7 +26,9 @@
               v-model="obj.count"
               :counter="10"
               :label="this.$gzlocale.get('WidgetCount')"
+              ref="count"
               name="count"
+              :rules="[this.$gzv.Required(this,'count')]"
               required
             ></v-text-field>
           </v-flex>
@@ -38,36 +38,11 @@
               v-model="obj.dollarAmount"
               :prefix="this.$gzlocale.formats.currencySymbol"
               :label="this.$gzlocale.get('WidgetDollarAmount')"
-              name="dollarAmount"
+              ref="dollarAmount"
               required
             ></v-text-field>
           </v-flex>
 
-          <!--
-            This block was for testing date validation outside of my custom control with v-validate, keeping it just for now until done my own validator code
-             <v-flex xs12 sm6 lg4 xl3 px-2>
-            <v-text-field
-              :label="this.$gzlocale.get('WidgetStartDate')"
-              v-model="obj.startDate"
-              name="startDate"
-              v-validate="'required'"
-              ref="qwerty"
-              :error-messages="errors.collect('startDate')"
-              required
-            ></v-text-field>
-          </v-flex>
-
-          <v-flex xs12 sm6 lg4 xl3 px-2>
-            <v-text-field
-              :label="this.$gzlocale.get('WidgetEndDate')"
-              v-model="obj.endDate"
-              name="endDate"             
-              v-validate="'required|gzafter:qwerty'"
-              :error-messages="errors.collect('endDate')"
-              required
-            ></v-text-field>
-          </v-flex>-->
-          <!-- YYYY-MM-DDTHH:mm:ss.sssZ -->
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetStartDate')"
@@ -87,7 +62,6 @@
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-checkbox
               v-model="obj.active"
-              value="1"
               :label="this.$gzlocale.get('Active')"
               name="checkbox"
               required
@@ -159,14 +133,7 @@ export default {
   data() {
     return {
       obj: {},
-      formReady: false,
-      theDate: new Date(),
-      date: new Date().toISOString().substr(0, 10),
-      menu: false,
-      modal: false,
-      menu2: false,
-      pw: "",
-      pw2: ""
+      formReady: false
     };
   },
   methods: {
@@ -178,7 +145,8 @@ export default {
     },
     submit() {
       // debugger;
-      this.$validator.validateAll();
+      //this.$validator.validateAll();
+      this.$refs.form.validate();
     }
   }
 };