This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
Reference in New Issue
Block a user