Cant get validate to function

[FWSimon]

Hey all,

This works

<validator name="validation1">
    <form novalidate>
      <input type="text" v-validate:username.required>
      <input type="text" v-validate:comment.maxlength="256">
      <div>
        <span v-show="$validation1.username.required">Required your name.</span>
        <span v-show="$validation1.comment.maxlength">Your comment is too long.</span>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>

But this does not

<validator name="validation1">
    <form novalidate>
        <input type="text" v-validate:username.required>
        <span v-show="$validation1.username.required">Required your name.</span>
    </form>
  </validator>

what im i doing wrong?

[Vue warn]: Error when evaluating expression "$validation1.username.required". 
app-369fb26243.js:2943Uncaught TypeError: Cannot read property 'required' of undefined

[JoshZA]

Have you tried outputting the state of the validator?

<pre> {{ $validation1 | json }} </pre> - Add this to your html, what does it show?

[martinlindhe]

Seems to me like vue validates the template before vue-validate is ready in the second case.

Due to the error happening, vue cant render <pre> {{ $validation1 | json }} </pre>

The "broken code" is running fine stand-alone: http://codepen.io/martinlindhe/pen/LGPvzo

But I can also reproduce this issue if i put the "broken code" inside my already somewhat big vue app (first sample works, second gives the same error). Vue 1.0.10, vue-validator 2.0.0-alpha.5

Only obvious difference I can see is that the codepen loads the cdn javascripts, while my bigger vue app registers the plugin using Vue.use(VueValidator)

[FWSimon]

Same setup aas @martinlindhe and errors :D

[JoshZA]

<template>
    <validator name="userValidator">
        <form>
            <input type="text"
                   v-model="username"
                   v-validate:username.required
            >
            <span v-if="$userValidator.username.required">Required your name.</span>
        </form>
    </validator>
    <br><br>
    <pre>{{$data | json}}</pre>
    <pre>{{$userValidator | json}}</pre>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                username: ''
            }
        },
    }
</script>

This component/validation works perfectly in my large vue app running the following: ├── vue@1.0.10 ├── vue-router@0.7.7 ├── vue-validator@2.0.0-alpha.5 (git://github.com/vuejs/vue-validator.git#45288170f51c38038d1bb6976ce6ca1c49265f59) ├── vueify@2.0.1

However, I do get the following in the console [Vue warn]: Error when evaluating expression "$userValidator.username.required". Turn on debug mode to see stack trace.

I'm running "vuejs/vue-validator#dev" (latest commit), perhaps that's why it's working?

[kazupon]

Sorry, I cannot find a solution to this issue yet. This issue is difficult.

I'm asking the advise about related issue at below forum.

http://forum.vuejs.org/topic/957/how-to-avoid-evaluating-expression-warning-for-plugin-author

This issue is occuring when we using development version of vue.js

In development of app, we can avoid this issue by setting the Vue.config.warnExpressionErrors = false.

I'll try to write the README.md later. :smile_cat:

[FWSimon]

oh cool, thanks @kazupon good job!

[kazupon]

fixed https://github.com/vuejs/vue-validator/releases/tag/v2.0.0-alpha.12

[FWSimon]

Thanks @kazupon Good job!

[angelbotto]

make sure window.Vue exists.

this solve my problem.

thanks @davidpelaez for helping :D

[davidpelaez]

This looks very weird. If the problem's solved by exposing Vue to the window object this most likely means that somewhere the code has wrong dependency resolution. If Vue is needed it should be imported in every file or passed as an argument.

David Peláez Tamayo | Designer & Entrepreneur

On Feb 2 2016, at 5:10 pm, Angel Celis Botto <notifications@github.com> wrote:

make sure window.Vue exists.

this solve my problem.

thanks @davidpelaez for helping :D

—
Reply to this email directly or view it on GitHub.