feat(QForm): validate respecting DOM order

Author: rstoenescu

ui/dev/src/pages/form/form.vue

@@ -213,7 +213,7 @@ export default {
       this.$q.notify('submit')
       console.log('@submit')
 
-      evt.target.submit()
+      // evt.target.submit()
     },
 
     onReset () {

ui/src/components/field/QField.js

@@ -129,7 +129,7 @@ export default Vue.extend({
     shouldRenderBottom () {
       return this.bottomSlots === true ||
         this.hint !== void 0 ||
-        this.rules !== void 0 ||
+        this.hasRules === true ||
         this.counter === true ||
         this.error !== null
     },

ui/src/components/form/QForm.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 
 import { stopAndPrevent } from '../../utils/event.js'
 import { slot } from '../../utils/slot.js'
-import { getAllChildren } from '../../utils/vm.js'
 
 export default Vue.extend({
   name: 'QForm',
@@ -28,38 +27,36 @@ export default Vue.extend({
 
       this.validateIndex++
 
-      const components = getAllChildren(this)
+      const components = this.getValidationComponents()
+
       const emit = (res, ref) => {
         this.$emit('validation-' + (res === true ? 'success' : 'error'), ref)
       }
 
       for (let i = 0; i < components.length; i++) {
         const comp = components[i]
+        const valid = comp.validate()
 
-        if (typeof comp.validate === 'function') {
-          const valid = comp.validate()
-
-          if (typeof valid.then === 'function') {
-            promises.push(
-              valid.then(
-                valid => ({ valid, comp }),
-                error => ({ valid: false, comp, error })
-              )
+        if (typeof valid.then === 'function') {
+          promises.push(
+            valid.then(
+              valid => ({ valid, comp }),
+              error => ({ valid: false, comp, error })
             )
-          }
-          else if (valid !== true) {
-            if (this.greedy === false) {
-              emit(false, comp)
-
-              if (focus === true && typeof comp.focus === 'function') {
-                comp.focus()
-              }
+          )
+        }
+        else if (valid !== true) {
+          if (this.greedy === false) {
+            emit(false, comp)
 
-              return Promise.resolve(false)
+            if (focus === true && typeof comp.focus === 'function') {
+              comp.focus()
             }
 
-            promises.push({ valid: false, comp })
+            return Promise.resolve(false)
           }
+
+          promises.push({ valid: false, comp })
         }
       }
 
@@ -101,10 +98,8 @@ export default Vue.extend({
     resetValidation () {
       this.validateIndex++
 
-      getAllChildren(this).forEach(comp => {
-        if (typeof comp.resetValidation === 'function') {
-          comp.resetValidation()
-        }
+      this.getValidationComponents().forEach(comp => {
+        comp.resetValidation()
       })
     },
 
@@ -138,9 +133,16 @@ export default Vue.extend({
 
     focus () {
       const target = this.$el.querySelector('[autofocus], [data-autofocus]') ||
-        [].find.call(this.$el.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
+        Array.prototype.find.call(this.$el.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
       target !== null && target !== void 0 && target.focus()
+    },
+
+    getValidationComponents () {
+      return Array.prototype.map.call(
+        this.$el.getElementsByClassName('q-field'),
+        field => field.__vue__
+      ).filter(c => c !== void 0 && typeof c.validate === 'function')
     }
   },
 

ui/src/components/form/QForm.json

@@ -112,6 +112,16 @@
           "__exemption": [ "examples" ]
         }
       }
+    },
+
+    "getValidationComponents": {
+      "desc": "Get array of children vue components that support validation",
+      "returns": {
+        "type": "Array",
+        "desc": "Vue components that support Quasar validation API",
+        "__exemption": [ "examples" ]
+      },
+      "addedIn": "v1.10.0"
     }
   }
 }

ui/src/mixins/validate.js

@@ -24,15 +24,13 @@ export default {
   },
 
   watch: {
-    value (v) {
-      if (this.rules === void 0) {
-        return
+    value () {
+      if (
+        this.hasRules === true &&
+        (this.lazyRules !== true || this.isDirty !== true)
+      ) {
+        this.validate()
       }
-      if (this.lazyRules === true && this.isDirty !== true) {
-        return
-      }
-
-      this.validate(v)
     },
 
     focused (focused) {
@@ -46,6 +44,12 @@ export default {
   },
 
   computed: {
+    hasRules () {
+      return this.rules !== void 0 &&
+        this.rules !== null &&
+        this.rules.length > 0
+    },
+
     hasError () {
       return this.error === true || this.innerError === true
     },
@@ -88,7 +92,7 @@ export default {
      *   - Promise (pending async validation)
      */
     validate (val = this.value) {
-      if (!this.rules || this.rules.length === 0) {
+      if (this.hasRules !== true) {
         return true
       }
 
@@ -104,6 +108,7 @@ export default {
         }
 
         const m = msg || void 0
+
         if (this.innerErrorMessage !== m) {
           this.innerErrorMessage = m
         }
@@ -180,9 +185,9 @@ export default {
     },
 
     __triggerValidation () {
-      if (this.isDirty === false && this.rules !== void 0) {
+      if (this.isDirty === false && this.hasRules === true) {
         this.isDirty = true
-        this.validate(this.value)
+        this.validate()
       }
     }
   }

ui/src/utils/vm.js

@@ -1,13 +1,5 @@
 import { isSSR } from '../plugins/Platform.js'
 
-export function getAllChildren (vm, children = []) {
-  vm.$children.forEach(function (child) {
-    children.push(child)
-    child.$children.length > 0 && getAllChildren(child, children)
-  })
-  return children
-}
-
 export function getVmOfNode (el) {
   for (let node = el; node !== null; node = node.parentNode) {
     // node.__vue__ can be null if the instance was destroyed