Vuelidate: Validation state of overall form

[Doogiemuc]

I really like your idea of implementing validation as a mixing instead of configuring it with vue directives in the tempaltes, as most others do.

But one question: I want the "Save" button in my forms to be deactivated until the whole form, ie all fields in the form, become valid. How would I query for this "overall validity" in your library?

Do I need to create a 'validation group' for the whole form? Shouldn't there be a global $isValid boolean in the returned $v ?

[mubaidr]

You have to use validation groups for that purpose. I have done exactly same functionality in my project, please have a look at this: https://github.com/mubaidr/SPA-asp.net-api-vuejs-/tree/master/MBO

(check signup component)

[furey]

@Doogiemuc

The root $v object contains $invalid, $dirty and $error values, just like all the keys inside of it:

{
    "example-data-key": {
        "required": true,
        "$invalid": true,
        "$dirty": true,
        "$error": true
    },
    "$invalid": true,
    "$dirty": true,
    "$error": true
}

For your save button, you could simply bind the disabled attribute like so:

<button :disabled="$v.$invalid">Save</button

Like @mubaidr mentioned, you could also use validation groups if your logic depends on specific fields being valid before enabling.

Cheers.