Vee-validate: Support for JSX

[danieloprado]

Versions:

• VueJs: 2.4.4
• Vee-Validate: 2.0.0-rc.23

Description:

I'm trying to use it with JSX but the validator always return true. Using the template syntax it work's as expected. I need some help 😢

Steps To Reproduce:

<div class="form-group">
  <input
    type="text"
    name="email"
    v-validate={"'required|alpha|min:3'"}
    class="form-control"
    placeholder="E-mail"
  />
</div>

//or v-validate="'required|alpha|min:3'"
//or v-validate={'required|alpha|min:3'}

field prop:

{
  "email": {
    "untouched": true,
    "touched": false,
    "dirty": false,
    "pristine": true,
    "valid": true, <---
    "invalid": false,
    "validated": false,
    "pending": false,
    "required": false
  }
}

[danieloprado]

Looking the vee-validate.esm.js, I discovery that binding.expression is always undefined no matter how the rules are passed:

Generator.resolveRules = function resolveRules(el, binding) {
  if (!binding || !binding.expression) { //binding.expression always undefined
    return getDataAttribute(el, 'rules');
  }

A workaround is add the prop data-vv-rules, I don't if is a Vue problem or VeeValidate. 😞

[logaretm]

I've never used JSX before, always preferred the SCF template style instead. I will look into it

[logaretm]

I was reading this:

https://github.com/vuejs/babel-plugin-transform-vue-jsx

Vue directives

Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show, which can be used with the v-show={value} syntax. In most cases there are obvious programmatic equivalents, for example v-if is just a ternary expression, and v-for is just an array.map() expression, etc.

For custom directives, you can use the v-name={value} syntax. However, note that directive arguments and modifiers are not supported using this syntax. There are two workarounds:

Pass everything as an object via value, e.g. v-name={{ value, modifier: true }}

Use the raw vnode directive data format:

const directives = [
  { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <div {...{ directives }}/>

Sounds like the issue you are describing, directives seems to have a special treatment in JSX

[Dahje]

Not sure if this will help but have you tried moving the double quotes (") outside of the braces ({ })?

v-validate={"'required|alpha|min:3'"}

v-validate="'required|alpha|min:3'"
or
v-validate="{required: true, alpha: true, min: 3}"

[danieloprado]

I've tried, but nothing works

[logaretm]

@danieloprado I brushed a little bit on JSX, for directives you need to provide an expression as well as a value, while the value is eventually is being used as the rules value source, the expression is being checked to determine if the user has passed anything at all. In template files both are passed without issues. But in JSX passing both makes no sense. More about that here.

Here is an example workaround for this issue for now. I have pushed a small fix for it so it would first check the value which will be up with the next release.

[danieloprado]

Thank you @logaretm!

Just for future checks, an easy workaround is just add the data-vv-rules.

<input
  type="email"
  name="email"
  v-model={this.model.email}
  v-validate
  data-vv-rules={'required|email'}
  placeholder="E-mail"
/>

[DM2489]

How would one use the event modifiers in JSX?

https://baianat.github.io/vee-validate/api/directive.html#directive-modifiers

[DM2489]

using directives is the only way I have found so far:

https://codesandbox.io/s/l7606zzj4l