Cannot read property 'validate' of undefined



  • 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();
    }
    


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


Log in to reply