q-form validation is not triggered on submit

[verbowersock]

I am having issues with triggering validation on submit on a very simple form. All i need is to make fields required, but submit just closes the form. Nothing even gets logged to the console. Can someone point me in the right direction? I checked the docs and numerous tutorials but can't make it work.

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Add New</div>
    </q-card-section>
    <q-separator />

    <q-card-section style="max-height: 50vh" class="scroll">
      <q-form
        ref="form"
        @submit="onSubmit"
        @cancel="onCancel"
        class="q-gutter-md"
        greedy
      >
        <q-input
          name="name"
          lazy-rules
          :rules="[(val) => (val && val.length > 0) || 'Please type something']"
          v-model="input.name"
          label="Name"
        />
        <q-input
          name="dob"
          v-model="input.dob"
          filled
          type="date"
          hint="Date of birth"
        />
        <q-separator />

        <div>
          <q-btn flat label="Cancel" color="secondary" v-close-popup />
          <q-btn type="submit" flat label="Add" color="primary" v-close-popup />
        </div>
      </q-form>
    </q-card-section>
  </q-card>
</template>

<script>
export default {
  data() {
    return {
      input: {
        name: null,
        dob: null,
      },
    };
  },
  methods: {
    async onSubmit() {
      const success = await this.$refs.form.validate();
      if (success) {
        console.log("success");
      } else {
        console.log("fail");
      }
    },
  },
};
</script>

[verbowersock]

I figured out that since the form is in a popup I had to add @click to the onSubmit and now it works, kind of. The validation happens successfully, however, I still get an error in the console after pressing submit and closing the popup. Uncaught (in promise) TypeError: Cannot read properties of null (reading 'validate').

[metalsadman]

that's not in your snippet, make a codepen.

[verbowersock]

Oddly enough, I don't have this error on codepen. Here it with the actual form I am working on https://codesandbox.io/s/ym3j9w?file=/src/main.js