Validate input fields on load

Dennis van Beek

Hi all,

Is there a way to make quasar input fields validate on load?

In some situations, I would like to validate all fields in the page as soon as the page is loaded.
But by default the validation is only done after a change or on blur (depending on lazy-rules).

Of course it is possible to give all fields a reference and call it on mount:

mounted () {
  if (this.validateOnMount) {
    for (let componentName in this.$refs) {
      let component = this.$refs[componentName]
      if (typeof component.validate === 'function') {
        component.validate()
      }
    }
  }
}

… but I’m wondering if there isn’t a better way to do this?

s.molinari

Check out the validate method on QForm. That might be what you are looking for.

Scott

Dennis van Beek

Thanks a lot for your reaction…

I’ve tried this, but I think the q-form only checks the first level of elements, and the quasar fields I want to validate, or defined in their own componets (in sub group components)…

My Vue model is something like:

<QForm>
  <Group>
    <QCard>
      <SingleTextLine>
        <ValidationContainer>
          <QInput...>
        </ValidationContainer>
      </SingleTextLine>
    </QCard>
  </Group>
  <Group>
    <QCard>
      <Address>
        <ValidationContainer>
          <QInput...>
          <QInput...>
          <QInput...>
          ...
        </ValidationContainer>
      </Address>
    </QCard>
  </Group>
  <Group>
  ...
</QForm>

I can create a separate q-form for every component, but that wouldn’t help a lot (and could create a few hundred forms for every page).

s.molinari

QForm was built to wrap QField components. If you are breaking them up, then you’d need to break up QForms accordingly. The QForms wouldn’t be around each field, but each group of fields, like your ValidationContainer component. Then, you’ll need to iterate over the forms components.

Or, move to Vuelidate. https://vuelidate.js.org/

And, if you have a business “object” with hundreds of fields, I’d question that design in general too. But, that’s just me.

Scott

Dennis van Beek

Thanks for your reply…

(and our business objects do not have a fixed size, so they can contain hundreds of fields, but usually they contain less :p)

metalsadman

@Dennis-van-Beek set the greedy props in your QForm, when you call its validate function, it will validate all the form components within it.

Dennis van Beek

Thanks for thinking along…

According to the docs, greedy makes a difference in continuing with the validation when a problem was found.
But in my model it does not encounter any problems, because he does not go ‘deep’ enough.

To make sure, I also tested it, but also with greedy the q-form-validate() returns true (even though a lot of components are not valid).

metalsadman

@Dennis-van-Beek the description is just saying that the default is what you will get if you don’t set greedy, if you set greedy prop then it Validate all fields in form. https://codepen.io/metalsadman/pen/ExjgGvW

Dennis van Beek

Ah, now I see it… my test was incorrect.

I tried to validate the form directly after the page was mounted, but I guess the sub components were not loaded yet, so that’s why the form was always valid.
When I execute the same form validation on a button click or something (so a bit later), it works perfectly!
(also without greedy it find’s the first error without a problem…)

Thanks again!

No More Posting New Topics!

Validate input fields on load