Vee-validate: Enable for dropdown

[renedekat]

Hi,

First of all: Nice work! Work a lot of with Laravel so don't have to remember 2 sets of validation rules.

Secondly, would it be possible to get this to work for dropdowns? I can attach the validation and it nicely tells me that the dropdown is required, but selecting an option becomes unusable as it keeps defaulting to the default value.

Cheers

[max76]

Hi,

I have a similar requirement, but it goes one step further, by trying wanting to require a dropdown built with "vue-multiselect".

All best,
Max

[renedekat]

@max76 I am using the following workaround now. It simply boils down to adding a hidden field, that is a computed variable. The validation is done on the hidden field.

Example:

                <div class="form-group" :class="{'has-error': errors.has('tenant_validate_id') }">
                    <input type="hidden"
                           name="tenant_validate_id"
                           v-model="tenant_validate_id"
                           v-validate="tenant_validate_id"
                           v-validate.initial
                           data-as="Tenant"
                           data-rules="required|numeric">
                    <label for="tenant_id" class="col-sm-3 col-lg-5 control-label">Tenant:</label>
                    <div class="col-sm-5 col-lg-7 controls">
                        <select name="tenant_id"
                                id="tenant_id"
                                data-placeholder="Choose a tenant"
                                class="form-control"
                                v-model="tenant_id"
                                v-on:change="loadTenancies"
                                >
                            <option value="">Choose a tenant</option>
                            <option value="1">Tenant 1</option>
                            <option value="2">Tenant 2</option>

                        </select>

                        <div><p class="text-danger" v-if="errors.has('tenant_validate_id')">{{ errors.first('tenant_validate_id') }}</p></div>
                    </div>

And the JS

        data: {
            tenant_id: null
        },
        computed: {
            tenant_validate_id: function() {
                return this.tenant_id;
            }
        },

Perhaps there's a better solution, and if so I'll come back to it.

[max76]

@renedekat I was planning to use a computed prop as well.

[logaretm]

Sorry I don't fully understand the issue here, Is dropdowns not working at all? can you setup a small fiddle so I can fully understand the issue.

@max76 MultiDropdown is an amazing plugin, but It would be hard to validate it directly like normal elements. The computed prop is one way to do it, or you can pragmatically attach the field, and use the@update hook to trigger $validator.validate on the selected value. remember that the validator doesn't care if they field actually exist or not, all it does is validate values regardless of its source.

I'm planning on implementing validation for components, which should increase the usability of the plugin, but that will require them to implement a specific interface, I'm still studying the possibility.

[max76]

@logaretm thanks for your reply! I am also thinking of a way to validate child components as we speak...

[renedekat]

@logaretm If you use the code I've posted above and do the validation on the actual dropdown instead of the hidden field, the validation prevents me from selecting an option. I can click on the dropdown, and it will show me the options, but when I select one, it reverts back to "none selected". The moment I remove the validate code from the select, it works as expected.

See this demo: https://jsfiddle.net/23qLxyb0/1/ The moment you select an option, it reverts back to none selected. Remove the validation and you can select options.

[ansarizafar]

I am also experiencing the same problem as mentioned by @renedekat but only on mobile devices. Here is the my code

<select class="ui simple dropdown" name="Area" v-model="area" v-validate data-rules="required">
            <option v-for="area in areaList" :value="area._id">{{area.name}}</option>
            </select>

[renedekat]

I've noticed that when I remove the "v-validate.initial", the problem disappears.

[logaretm]

@renedekat I see you have two instances of the directive being bound on the same element, they could be conflicting in a way that caused the issue. I was trying to investigate it but it was working as intended for me, values were changing like they are supposed to. I even added a dropdown in the docs for the in rule example which is working properly. Was the issue specific to a browser?

@ansarizafar you might need to use the directive like this:

v-validate="area"

since the input value is being bound, this also skips adding listeners since Vue already does that for us. but I still need to take a look on the mobile.

[renedekat]

@logaretm I don't see how I have it bound twice. Can you update this example to illustrate what you mean? https://jsfiddle.net/23qLxyb0/5/

[logaretm]

@renedekat
lines 10 and 11 in the html you have:

v-validate="tenant_id"
v-validate.initial

which is two references to the directive, you can do this instead:

v-validate.initial="tenant_id"

but I'm not sure if its causing the issue for you, I've added another rule to display the error message if the second option was selected.

[renedekat]

@logaretm Brilliant! I thought they had to be used in conjunction. Thanks for that

[logaretm]

@renedekat Does this issue still occur?

[renedekat]

@logaretm Nope, the double binding seemed to cause the issue, which was my mistake.

[logaretm]

Great Thanks!

[kishankarun]

Hi, for me,
v-validate.initial="required" is set,
select is bound with v-model
and the list is populated using a computed property which is received from an ajax response.

I have found that the error is not cleared first time, even though the right value is selected, but only gets cleared only once it receives focus.

Where the row item is also a computed value

<div v-for="(row, index) in myList" :key="index">
....

<div class="form-group" :class="{'has-danger': errors.has('form-' + index + '.rcArea')  }">
    <select name="rcArea" id="rcArea" v-model="row.issueTypeId" class="form-control" :data-vv-scope="'form-' + index" v-validate.initial="'required'">
        <option value=""></option>
        <option v-for="(option, issIndx) in issueTypes" :value="option.id" :key="issIndx">
            {{ option.name }} [{{ option.cluster }}]
        </option>
    </select>
</div>

computed:{
myList: function() {
                return this.$store.state.RCAVm.ciJobRCAList || []  ;
            },

issueTypes : function() {
                return this.$store.state.RCAVm.issueTypes || []  ;
            },

}

[fselcukcan]

I just do not get whether vee-validate can validate html select elements or not. If it can how? I currently cannot succeed todo so with using v-validate directive on a select element.

[pkbarbiedoll]

Has anyone figured how to use v-validate="required" with a select object?

[JaredPotter]

@pkbarbiedoll I'm curious to know what you were experiencing. For me, when I tried to change the value of a select it would just default back to an first value.

Through testing I'm not sure if it is Vue's or vee-validate's fault.

What I found as a solution was to attach to the @input directive and set the v-model value.

For example,
@input="vModelVariable = $event.target.value"

https://forum.vuejs.org/t/v-model-on-select-not-working-on-components/8419/2