This commit is contained in:
2019-03-08 21:39:37 +00:00
parent 5224a03500
commit 2b803b0c3d
4 changed files with 18 additions and 85 deletions

View File

@@ -20,6 +20,7 @@ DATETIME
- Validation
- after much fuckery it's becoming clear that between the localization requirements and the complexity of server broken rules coming back from the api that I should just use my own validation code
- See here: https://vuetifyjs.com/en/components/forms#form
- And here: https://vuetifyjs.com/en/components/text-fields#custom-validation
- What is needed is a class that returns an array of functions that can be passed to vuetify "rules" property of components
On change each rule is called in turn and if one returns false or a string then it's in an error state
- I also need to add that it scans and or keeps a collection of broken rules that come back from the server and each component checks a rule that checks in turn for server broken rules in last api call

View File

@@ -62,14 +62,6 @@ export default {
throw "GzDateAndTimePicker: $gzlocale is required and missing";
}
},
$_veeValidate: {
name() {
return this.label;
},
value() {
return this.value;
}
},
data: () => ({ date: null, dlgdate: false, dlgtime: false }),
props: {
label: String,

View File

@@ -32,19 +32,7 @@ Object.defineProperty(Vue.prototype, "$gzerror", {
/////////////////////////////////////////////////////////////////
// FORM VALIDATION
//
import VeeValidate from "vee-validate";
//My custom rules
import gzaftervalidator from "./api/gzaftervalidator";
VeeValidate.Validator.extend("gzafter", gzaftervalidator);
// VeeValidate.Validator.extend(
// gzaftervalidator,
// Rules[gzaftervalidator].validate,
// assign({}, Rules[gzaftervalidator].options, {
// paramNames: Rules[gzaftervalidator].paramNames
// })
// );
Vue.use(VeeValidate);
//Vue.config.productionTip = false;
//TODO: CODE THIS
/////////////////////////////////////////////////////////////////
// ERROR HANDLING

View File

@@ -5,10 +5,8 @@
<v-layout align-center justify-left row wrap>
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
v-model="obj.name"
v-validate="'required|max:255'"
:counter="255"
:error-messages="errors.collect('name')"
v-model="obj.name"
:counter="255"
:label="this.$gzlocale.get('WidgetName')"
name="name"
required
@@ -16,10 +14,8 @@
</v-flex>
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
v-model="obj.serial"
v-validate="'required|max:10'"
:counter="10"
:error-messages="errors.collect('serial')"
v-model="obj.serial"
:counter="10"
:label="this.$gzlocale.get('WidgetSerial')"
name="serial"
required
@@ -27,10 +23,8 @@
</v-flex>
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
v-model="obj.count"
v-validate="'required|max:10'"
:counter="10"
:error-messages="errors.collect('count')"
v-model="obj.count"
:counter="10"
:label="this.$gzlocale.get('WidgetCount')"
name="count"
required
@@ -40,16 +34,16 @@
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
v-model="obj.dollarAmount"
:prefix="this.$gzlocale.formats.currencySymbol"
v-validate="this.$gzlocale.decimalValidate(true)"
:error-messages="errors.collect('dollarAmount')"
:prefix="this.$gzlocale.formats.currencySymbol"
:label="this.$gzlocale.get('WidgetDollarAmount')"
name="dollarAmount"
required
></v-text-field>
</v-flex>
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
<!--
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"
@@ -71,38 +65,12 @@
required
></v-text-field>
</v-flex>-->
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
label="PW"
v-model="pw"
name="pw"
v-validate="'required'"
ref="THEPW"
:error-messages="errors.collect('pw')"
required
></v-text-field>
</v-flex>
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-text-field
label="PW2"
v-model="pw2"
name="pw2"
v-validate="'required|confirmed:THEPW'"
:error-messages="errors.collect('pw2')"
required
></v-text-field>
</v-flex>
<!-- YYYY-MM-DDTHH:mm:ss.sssZ -->
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
<v-flex xs12 sm6 lg4 xl3 px-2>
<gz-date-time-picker
:label="this.$gzlocale.get('WidgetStartDate')"
v-model="obj.startDate"
name="startDate"
data-vv-as="startDate"
v-validate="'required'"
ref="startDate"
:error="errors.first('startDate')"
name="startDate"
></gz-date-time-picker>
</v-flex>
@@ -110,32 +78,19 @@
<gz-date-time-picker
:label="this.$gzlocale.get('WidgetEndDate')"
v-model="obj.endDate"
name="endDate"
data-vv-as="endDate"
v-validate="'after:startDate'"
:error="errors.first('endDate')"
name="endDate"
></gz-date-time-picker>
</v-flex>-->
</v-flex>
<v-flex xs12 sm6 lg4 xl3 px-2>
<v-checkbox
v-model="obj.active"
v-validate="'required'"
:error-messages="errors.collect('checkbox')"
v-model="obj.active"
value="1"
:label="this.$gzlocale.get('Active')"
name="checkbox"
required
></v-checkbox>
</v-flex>
<v-flex xs12 sm6 lg4 xl3 px-2>
<ul>
<li v-for="(group, index) in errors.collect()" :key="index">
<ul>
<li v-for="(error,index) in group" :key="index">{{ error }}</li>
</ul>
</li>
</ul>
</v-flex>
</v-layout>
<v-layout align-center justify-space-around row wrap mt-5>
@@ -158,9 +113,6 @@
/* eslint-disable */
export default {
$_veeValidate: {
validator: "new"
},
beforeCreate() {
//Cache all required lt keys
var ltKeysRequired = [