Is there a way to set the required validation dynamicly?

[fdverwoerd]

Hello there! Love formkit!

I was looking for a way to set required dynamicly based on a setting in an object in Vue.:

The options are required | optional | hidden.

So when option is required i need `validation="required|length:1,5".

Is this possible? I tried using an object notation like so: but that wont work.

<FormKit v-if="lisyConfig.fieldOptions.fieldOptionsFamilyNumber !== 'hidden'"
                   type="text"
                   name="familyNumber"
                   id="familyNumber"
                   :validation="{
                      required: lisyConfig.fieldOptions.fieldOptionsFamilyNumber === 'required',
                      length: [1, 5],
                   }"
                   label="Gezinsnummer"
                   outer-class="form-grid-column-12"
          ></FormKit>

[fenilli]

validation does not accept object notation, it is string or array, with that said this might work:

:validation="[
  ...(cond ? [['required']] : []),
  ['length', 1, 5]
]"

[fdverwoerd]

This is not allowed it seems.

I think I should use a validation rule. But cannot make it work. Also have to put asterix everywhere again...

import type { FormKitNode } from '@formkit/core';
/**
 * File: my-custom-rules/monday.js
 *
 * A contrived validation rule that ensures the input’s value is monday or mon.
 */
const lisy_required = function (node: FormKitNode, ...args: any[]) {
  console.log('lisy_required', node.value);
  console.log('lisy_required args', args);
  if (args[0] === 'required') {
    console.log(node.value);
    return node.value === '';
  } else {
    return false;
  }
}

export default lisy_required;

[justin-schroeder]

you can 100% do dynamic validation rules. You just have to provide the correct format. For example you could even do it with a ref and a string:

https://formkit.link/7853183e81a9325398ba9afe188d4bbd

[justin-schroeder]

keep in mind, all validation rules are skipped when empty unless their skipEmpty property is set to false.

Your function will need:

const lisy_required = function (node: FormKitNode, ...args: any[]) {
 ...
}

lisy_required.skipEmpty = false

[fenilli]

That was my mistake, I forgot to do a double array it should be: [['required']].

[fdverwoerd]

I think I have a working version now :)
I did not read properly that if the return is false, the error is shown... 🙈

import type { FormKitNode } from '@formkit/core';
/**
 * File: lisy_required.ts
 *
 * This is a custom validation rule for FormKit. If the current args is required then do required check.
 */
const lisy_required = function (node: FormKitNode, ...args: any[]) {
  if (args[0] === 'required') {
    console.log(typeof node.value)
    if (typeof node.value === 'string') {
      console.log('length', node.value.length);
      console.log('string type:', typeof node.value === 'string')
      console.log('lenght=0:', node.value.length === 0);
    }
    return typeof node.value === 'string' && node.value.length !== 0;
  } else {
    // passing is true
    return true;
  }
}
lisy_required.skipEmpty = false;

export default lisy_required;

And Vue template

<FormKit v-if="lisyConfig.fieldOptions.fieldOptionsFamilyNumber !== 'hidden'"
                   type="text"
                   name="familyNumber"
                   id="familyNumber"
                   :validation="[
                     ['lisy_required', lisyConfig.fieldOptions.fieldOptionsFamilyNumber],
                     ['length', 1,5]
                     ]"
                   label="Gezinsnummer"
                   outer-class="form-grid-column-12"
          ></FormKit>

[fdverwoerd]

I was also using the addAsteriskPlugin and adjusted the isRequired line as to also get asterix when using lisy_required and args is required.

const isRequired = node.props.parsedRules.some((rule:any) => rule.name === 'required' || rule.name === 'lisy_required' && rule.args[0] === 'required');

[fdverwoerd]

Thank you very much! 💯