Validator Renderless Component

[logaretm]

A new way to use vee-validate, using renderless components, sometimes called provider component. It will use scoped slots to provide the validation state for fields.

<validate rules="required|email">
   <template slot-scope="{ errors, flags }">
      <input name="email" type="email">
   </template>
</validate>

[freitasskeeled]

Hi,

Is this already included in the latest beta release?

Thanks!

[logaretm]

Not yet, I'm trying to fiddle around the concept at the moment. One issue is that it introduces a significant amount of markup which might be annoying.

[freitasskeeled]

Hi again,

First, thanks for the amazing work! I see your point but this type of validate will not impact how you "normally" use vee-validate, right? I see this more like an advanced/specific use case.

I also have a special interest on this since I need something exactly like this so If I can provide any type of insight or help, let me know!

Cheers!

[logaretm]

Yep, it will be an advanced use case, the idea is to make the validation logic contained within this component. also will allow for more control over the update UI which will be more efficient.

Currently, I'm trying to make it able to wrap multiple inputs, meaning:

<validate rules="required|email">
   <template slot-scope="{ errors, flags }">
      <input name="email" type="email">
      <input name="password" type="password">
   </template>
</validate>

Which would certainly be more "template efficient" but didn't decide yet if it should. Feel free to provide suggestions to this issue, I will try to make the PR soon.

[freitasskeeled]

I see what you mean. On the other hand, it's really necessary to support multiple inputs? I understand that it could a nice to have functionality, but I really see it as "one-to-one" relationship between a provider component and a input/component (at least for the most cases).

[freitasskeeled]

Hi,

Do you have any updates on this?

Cheers

[logaretm]

Sorry for the late update, I did not have as much time as I thought to work on this. There were a plenty of challenges to implementing this, for example, its easy to tell if an HTML input is the target of validation (since there are only a limited pool of tags like input and select, etc...)

For custom components, it would be impossible to tell which component to validate, so a limitation must be introduced here, the component will only validate the node that has v-model in it.

Currently the usage is like this:

<Validator rules="required">
  <template slot-scope="{ errors, flags }">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" :class="{ 'is-valid': flags.valid, 'is-invalid': flags.invalid }" v-model="val" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        <div class="valid-feedback" v-if="flags.valid">
          Looks good!
        </div>
        <div class="invalid-feedback" v-if="flags.invalid">
          {{ errors[0] }}
        </div>
      </div>
    </form>
  </template>
</Validator>

Which can be less verbose when refactored into custom components. But it is looking up to be a nice way to handle things. A few issues remain like watching a v-for model and possible template changes.