Form Validation

maxant

Are there any directives or similar so that I can define validation in the template rather than by using the validate object? E.g.:

<q-input
    ...
    required
    maxlength="40"
    ...
    >

Yeah, they are also Html5 validation attributes: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
I’m using Vuelidate, but if there is anything else out there I’d be happy to take a look.

metalsadman

@maxant see quasar’s internal validations https://v1.quasar-framework.org/vue-components/input#Validation.

mKomo

Quasars internal form validation should be good for most cases, however check out Vuelidate if you need more punch

metalsadman

he is already using Vuelidate though. @maxant try looking into Vee-Validate https://baianat.github.io/vee-validate/. It’s a template based validation library if quasar’s internal one is not enough in your case.

maxant

Thanks @metalsadman , @mKomo

I took a look at the internal validation yesterday. I really like it, as it’s much simpler than Vuelidate.

But I can’t find any docs on how to test it. E.g. I noticed that I can create a ref to a q-input and then access Validation stuff like this:

this.$refs.other.validate()
//false
this.$refs.other.validateIndex
//2

I could also iterate over the rules and execute them myself to check that they are firing:

this.$refs.other.rules[0](this.$refs.other.value)
//true
this.$refs.other.rules[1](this.$refs.other.value)
//"Please use maximum 1 character"

But can I get the q-input to tell me which validation error it is currently showing? I guess the index above tells me that? Couldn’t find any docs though

metalsadman

What test you are trying to do though? here’s their testing docs https://testing.quasar-framework.org/. probably take a look into vue js testing utils too https://vue-test-utils.vuejs.org.

maxant

@metalsadman a “component test” with the goal of testing the component by interacting with it like a user would, as shown here: https://vue-test-utils.vuejs.org/guides/getting-started.html

mount the component
check its initial state (eg. that a part of the form containing details is closed)
click the button which opens the details
check the details widgets are present
enter some invalid data
check the relevant error messages are being “displayed” (the component isnt actually visible during these tests)
correct the problems
click the submit button
verify that the correct function is called

Nothing special really, just a standard “integration” test which checks the component works as designed.

maxant

document.getElementById("claims-form-other").__vue__.validateIndex

That number just increases every time validation is carried out. It is not the index of the validation rule which is currently being show.

maxant

Internal validation error messages can be found like this during testing:

assert.equal(wrapper.vm.$refs.summary.innerErrorMessage, "Please use maximum 20 character", "focused on create button, so error on summary field is now shown")

See https://forum.quasar-framework.org/topic/3437/unit-testing-and-simulating-input for more details.

API can be found here: https://v1.quasar-framework.org/vue-components/input#QInput-API

No More Posting New Topics!

Form Validation