lazy-rules="ondemand" doesnt work when I use external validation



  • I want q-form to trigger external validation function “isUsernamVlid” when I click Login button. However, every time I typed a character in q-input, validation function was triggered. How to fix it?

     <q-form @submit.prevent="submitForm">
          <q-input
            class="q-ma-md"
            outlined
            lazy-rules="ondemand"
            v-model="id"
            label="ID"
            error-message="wrong"
            :error="!isUsernameValid"
          />
          <q-btn
             class="q-ma-md"
             type="submit"
             color="light-blue"
             label="Login"
             :loading="submitting"
          >
          <template v-slot:loading>
                <q-spinner-facebook />
          </template>
     </q-btn>
    


  • @daep93 said in lazy-rules="ondemand" doesnt work when I use external validation:

    isUsernameValid

    a bit of a workaround:
    you could check inside the !computed! property isUsernameValid if the login button has been pressed before( with a data.hasFormSubmitted boolean in data for example), if not !data.formSubmitted then always return true in isUsernameValid ( no errors will be shown until you press the submit button).

    In addition when you change the input value set data.formSubmitted = false again.



  • @dobbel Thank you your advice. I think your approach looks good but the suggested way is not fundamental solution for usage of lazy-rules. It will check validation when I would type a character in input box. It means, anyway, lazy-rules=“ondemand” still not work.


Log in to reply