No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Cannot read property 'validate' of undefined

    Help
    2
    2
    2529
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      haizad last edited by haizad

      Hi,

      I am trying to follow the quasar documentation on validation parts. https://quasar.dev/vue-components/input#Validation . The validation works as expected *see Picture 1, but when I am trying to submit the form RIGHT AFTER all the input fields got correctly validated, I got error message of Cannot read property ‘validate’ of undefined *see Picture 2.

      Picture 1
      c540fd3b-7ef1-4734-ad91-7939a992b56d-image.png

      Picture 2
      d2f74e82-42ed-4fcf-84de-cbb2e46e6cd3-image.png
      bddc5447-029d-4538-9501-69d27c3317fb-image.png

      I assumed that it cannot read ‘validate’ property after all the field was correctly filled.

      My form code :

      <q-form @submit="onSubmit" class="q-gutter-md">
      
      .....
      <q-select
          behavior="menu"
          standout="bg-teal text-white"
          v-model="details"
          :options="detailsdata"
          option-value="id"
          option-label="name"
          option-disable="inactive"
          emit-value
                          
          lazy-rules = "ondemand"
          :rules="[ val => !!val || 'Skop kerja perlu di pilih/isi']"
          map-options
          label="Skop Kerja"
      >
      
      ..
      data() {
          return {
            details: null,
      
      

      onSubmit function :

          onSubmit() {
                this.$refs.details.validate();
      

      Reference

      https://quasar.dev/vue-components/input#Validation

      6fbb6de8-579b-469d-b954-77684ee88449-image.png

      Update : I counter the issue by using if-statement and the error message is gone. 😕

      if(this.packages === null || this.contractname === null || this.details === null || this.worktype === null || this.states === null || this.districts === null) 
      {
      
             this.$refs.packages.validate();
             this.$refs.contractname.validate();
             this.$refs.details.validate();
             this.$refs.worktype.validate();
             this.$refs.states.validate();
             this.$refs.districts.validate();
      }
      
      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @haizad last edited by

        @haizad in your template snippet there’s no ref used, better make a codepen imo.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post