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

[daep93]

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>

[dobbel]

@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.

[daep93]

@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.