Field is always initially valid

[ansbar]

Lets try again.

Check this sandbox out: https://codesandbox.io/s/62v6q0mw4r

The first field is stand alone with required and gets valid: false initially.

The second value is inside a validation-provider with required and it gets valid: true initially.

Is this supposed to happend or a bug?

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <input
      type="text"
      name="field2"
      v-validate="'required|alpha'"
      v-model="field2"
    /><br />
    Valid: {{ fields.field2.valid }} <br />
    {{ fields }} <br /><br />

    <template>
      <ValidationProvider rules="required|alpha">
        <div slot-scope="{ classes, errors }">
          <input type="text" name="field" v-model="field" /><br />
          Valid: {{ classes.valid }} <br />
          {{ errors[0] }}<br />
          {{ classes }}
        </div>
      </ValidationProvider>
    </template>
  </div>
</template>

<script>
import { ValidationProvider } from "vee-validate";

export default {
  name: "HelloWorld",
  components: {
    ValidationProvider
  },
  data() {
    return {
      field: "",
      field2: "",
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

Is it supposed to work this way?

[ansbar]

@logaretm Please have a look again. Ive added a sandbox.

[ansbar]

"Triggering validation on any of the providers is simple, but it is opt-in. Meaning you need to explicity call the validation on the provider instance. Using refs and the public method validate makes it straight forward." Thats what I missed?

[ansbar]

The validationprovider input classes actually says "required": false"..