Vee-validate: Questions concerning the new validation components

Created on 1 Nov 2018 · 11Comments · Source: logaretm/vee-validate

Versions:

VueJs: 2.5.17
Vee-Validate: 2.1.1

Description:

The new validation components make sense to me and I'm currently converting my code to use them.
However I encountered some problems.

1) How to fill server side validation errors? This is what I've done before:

forEach(errors, (errs, key) => {
    const field = this.$validator.fields.find({ name: key, scope: this.$options.scope })

    if (field) {
        this.$validator.errors.add({
            id: field.id,
            field: key,
            msg: errs[0],
            scope: this.$options.scope
        })

        field.setFlags({
            invalid: true,
            valid: false,
            validated: true
        })
    }
})

2) I tried to use a ValidationObserver together with a ValidationProvider but got an error. Is that not possible and how should it be done?

<ValidationObserver ref="userData">
    <template slot-scope="{ invalid }">
        <ValidationProvider rules="required|alpha_num|min:3|max:16">
            <template slot-scope="{ errors }">
                <v-text-field
                    type="text"
                    name="username"
                    prepend-icon="person"
                    label="Nutzername"
                    color="primary"
                    v-model="username"
                    data-vv-as="Nutzername"
                    :error-messages="errors"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|email">
            <template slot-scope="{ errors }">
                <v-text-field
                    type="email"
                    name="email"
                    prepend-icon="email"
                    label="E-Mail Adresse"
                    color="primary"
                    v-model="email"
                    data-vv-as="E-Mail Adresse"
                    :error-messages="errors"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|min:8|max:72">
            <template slot-scope="{ errors }">
                <v-text-field
                    :type="showPassword ? 'text' : 'password'"
                    vid="password"
                    name="password"
                    prepend-icon="lock"
                    :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                    label="Passwort"
                    color="primary"
                    v-model="password"
                    data-vv-as="Passwort"
                    :error-messages="errors"
                    @click:append="showPassword = !showPassword"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|confirmed:password">
            <template slot-scope="{ errors }">
                <v-text-field
                    :type="showPasswordConfirmation ? 'text' : 'password'"
                    name="password_confirmation"
                    prepend-icon="lock"
                    :append-icon="showPasswordConfirmation ? 'visibility_off' : 'visibility'"
                    label="Passwort wiederholen"
                    class="mb-3"
                    color="primary"
                    v-model="password_confirmation"
                    data-vv-as="Passwort wiederholen"
                    :error-messages="errors"
                    @click:append="showPasswordConfirmation = !showPasswordConfirmation"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <v-btn color="primary" @click="preRegister" :disabled="invalid">
            Weiter
        </v-btn>
    </template>
</ValidationObserver>

3) Since vue 2.5.x it is possible to use the scoped-slot feature on other things than template.
Would it be possible to do <ValidationProvider slot-scope="{ errors }"> to safe some lines?

❔ question

Source

P4sca1

Most helpful comment

@logaretm, how about use case when we have multiple ValidationProviders wrapped inside ValidationObserver, like this:

<ValidationObserver ref="observer">
           <form slot-scope="{ invalid }">
                <ValidationProvider rules="required">
                   <base-range-input v-model="field1" name="field1" label="Field1" min="0" max="10"
                                      slot-scope="{ errors }">
                        <span class="error-message">{{ errors[0] }}</span>
                    </base-range-input>
                </ValidationProvider>

                <ValidationProvider rules="required">
                    <base-range-input v-model="field2" name="field2" label="Field2" min="0" max="10"
                                      slot-scope="{ errors }">
                        <span class="error-message">{{ errors[0] }}</span>
                    </base-range-input>
                </ValidationProvider>

                <div class="text-center">
                    <button class="btn btn-default"
                            :class="{'disabled': invalid}"
                            @click.prevent="submitForm">Submit
                    </button>
                </div>
            </form>
</ValidationObserver>

Is there a way to programmatically add an error to a specific child in this case other than treat each one separately using specific ref attribute names and match them to api response name fields?

There also might be a situation with complex forms when having lots of nested components is inevitable and in this case using refs for each nested validation provider to place backend errors cannot be a solution.

I tried attaching custom error to observer's ErrorBag, but it seems to have no effect

PoddukinVladimir on 28 Feb 2019

👍2

All 11 comments

How to fill server side validation errors?

Currently there is no API to do that, but there is nothing stopping you from:

 <ValidationProvider rules="required|confirmed:password" ref="password">
 <!-- ..... -->
</ValidationProvider>

<script>
  this.$refs.password.errors = errorsArrayFromServer;
</script>

I will try to come up with a more suitable API for it.

I tried to use a ValidationObserver together with a ValidationProvider but got an error.

They are meant to be used together, an observer isn't useful without having some child providers. This example uses them both. Would be more useful if you describe what type of errors are you getting.

Since vue 2.5.x it is possible to use the scoped-slot feature on other things than template.
Would it be possible to do to safe some lines?

You can place slot-scope on any root element inside the validation provider component, but not on itself. Quoting this from the docs:

"In 2.5.0+, slot-scope is no longer limited to the

Vee-validate: Questions concerning the new validation components

Versions:

Description:

Most helpful comment

All 11 comments

Related issues