Vue-formulate: Add a new `optional` validation rule

[mjlehrke]

Describe the bug
I am trying to create a form with an optional URL field. When applying the URL validation rule to this field, it automatically fails validation if the field remains empty. This occurs because isUrl rejects if passed an empty string. Note this occurs on both type="text" and type="url" fields. Because of this, optional text fields cannot be used in a form with URL validation.

Link to the URL validation function, which rejects if passed an empty string (I tested this with that npm package): https://github.com/wearebraid/vue-formulate/blob/c6ffe1995be0df608c9c735186f4158662449fc8/src/libs/rules.js#L283

You can actually see this bug on the validation documentation page. Upon page load, the URL validation field already has an error message because the field starts empty: https://vueformulate.com/guide/validation/#url

To Reproduce
https://codepen.io/mjlehrke/pen/jOWyyrq

1. Create a URL or text field with FormulateInput
2. Add URL validation with validation="url"
3. Attempt to submit form with empty field
4. It will fail validation

Reproduction
Submit empty fields in this codepen. It will automatically fail validation.
https://codepen.io/mjlehrke/pen/jOWyyrq

Expected behavior
An optional text field with URL validation should not automatically fail validation if that optional field is empty. Bigger picture, any Formulate field should only go through validation if it is not empty or it has the 'required' rule.

Thinking about this further, maybe there should be an 'optional' validation rule that bails out of validation if the field is empty? This would allow you to add validation to a field, but make that field optional, and only validate anything if it is not empty. (I can make a new feature request if needed)

Screenshots

If I duplicate a repeatable input group, it automatically fails validation

Device information:

• Device: PC
• OS: Windows 10
• Browser: Firefox & Chrome
• Version 2.4.0 (it was also happening in 2.3.8)

[justin-schroeder]

@mjlehrke you are totally correct. In fact all validation rules currently operate this way, they are implicitly required. We were talking about this the other day actually and agree it's not ideal, although _most_ of the time we think it actually matches developers pre-existing mental model of how fields should work.

Future
In the near future we plan to add an optional rule so you can explicitly mark fields as optional when it makes sense.

<FormulateInput
  validation="optional|url"
/>

Today
You can opt to reactively add the validation rule when there is a value in the field. For example:

<FormulateInput
  v-model="url"
  :validation="url ? 'url' : false
/>

[mjlehrke]

Thanks for the tip!

I look forward to the new rule!

[Yiddishe-Kop]

I was looking for the same thing: I have an optional email field, that I want to validate only if it's not empty.
In Laravel we can do this: 'nullable|email'.

Looking forward for the new rule, & thanks for the current workaround!

[fbraem]

When using this:

end_date !== '' ? 'date' : ''

I get:

vue.common.dev.js?4650:1893 Error: Unknown validation rule

When I use null instead of the empty string, the error disappears.
(vue-formulate 2.4.1)

[justin-schroeder]

Right you are @fbraem , I my example should have used false since an empty string is still technically looking for a rule. Thanks for pointing that out!

[timsayshey]

@justin-schroeder Sadly the workaround doesn't work for generated forms - Is there a solution for that aside from waiting for the new optional rule?

[justin-schroeder]

@timsayshey I don't think there's a workaround, but its no longer need because I just published v2.4.2 with the new optional rule 🎉

https://vueformulate.com/guide/validation/#optional

Enjoy!

[timsayshey]

@justin-schroeder Awesome! Thank you!

[joaquinwojcik]

@justin-schroeder when v2.4.2 will be merged to master?

[justin-schroeder]

@joaquinwojcik several months ago :) you can find it on the validation rule docs

[joaquinwojcik]

@justin-schroeder sorry, my bad. you're right.

I'm actually using v2.4.3. Optional validation doesnt seem to work well with custom validation rules.

Code:

<FormulateInput
  label="WhatsApp"
  type="text"
  name="phoneWA"
  v-model="account.phoneWA"
  validation="optional|^phone"
  validation-name="WhatsApp Phone"
  error-behavior="live"
  help="Country code + Number"
/>

phone is a custom validation rule that I made.

const InternationalPhoneExpression = /^\+(?:[0-9]●?){6,14}[0-9]$/;

Vue.use(VueFormulate, {
  rules: {
    phone: ({ value }) => value.match(InternationalPhoneExpression)
  },
  locales: {
    en: {
      phone ({ name }) {
        return `${name} must match this pattern: Country code + Number.`
      }
    }
  }
})

I'm getting this:

I think its wrong because phone validation is called even when field is empty.

Am I forgetting something?

[justin-schroeder]

@joaquinwojcik hmm. that looks right to me. Could you file a new bug report with this code sample as well as a reproduction on code sandbox (check the community page for a boilerplate for reproduction)? That way we can make sure it gets properly addressed if it is indeed a bug.

[joaquinwojcik]

Sure!