validation for GmapAutocomplete

[chrisbbreuer]

Hi,

for some reason I can't seem to figure out a good solution for some type of verification. The issue seems to be that the component GmapAutocomplete does not accept 2-way-binding, hence, using vee validate would not work which I would like to make use off.

Is there any idea how I could make the following work:

<GmapAutocomplete
        v-validate="'required|min:10'"
        name="address"
        :class="{'field': true, 'form-control': true, 'is-invalid': errors.has('address')}"
        @place_changed="setPlace"
        placeholder="Address">
</GmapAutocomplete>

If two way binding was working, I could just add a hidden input field and validate that one instead, but I assume vee validate would work then as well.

Any ideas?

A jsfiddle for my concern is here: https://jsfiddle.net/onz7m5m1/29/ Thanks!

[xkjyeah]

Well the problem is, what are you trying to validate?

Do you want to validate: A) the input in the textbox (which may or may not be associated with an actual place) B) the place returned by @place_changed? C) the lat/lng of the place? D) the description of the place?

On Wed, Nov 1, 2017 at 1:56 AM, Chris notifications@github.com wrote:

Hi,

for some reason I can't seem to figure out a good solution for some type of verification. The issue seems to be that the component GmapAutocomplete does not accept 2-way-binding, hence, using vee validate would not work which I would like to make use off.

Is there any idea how I could make the following work:

<GmapAutocomplete v-validate="'required|min:10'" name="address" :class="{'field': true, 'form-control': true, 'is-invalid': errors.has('address')}" @place_changed="setPlace" placeholder="Address">

If two way binding was working, I could just add a hidden input field and validate that one instead, but I assume vee validate would work then as well.

Any ideas?

Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/245, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRxqx0utcdfdUBZBkSmbqN2QIRcUdks5sx19dgaJpZM4QNK6N .

[Rufio2031]

B) Validate that the value entered is an actual place.

[zakst]

In case someone finds this there is a way for custom components based on the document of custom components here https://vee-validate.logaretm.com/examples.html

1. Add data-vv-name attr, the documentation start data-vv-name or name but name only does not work 2. Write your own vanilla validation then if there is an error add it by this.errors.add(data-vv-name, 'message')

My validation code was as follows

 if(this.$data.placeName.length < 5){
        this.errors.add('placeName', 'Please enter a place')
      }

Hope this helps