feat(validation): Add 'optional' prop

[carlesalbasboix]

Description

Added a boolean prop called 'optional' to the validation composable. If the model value is empty (undefined, empty string or empty array) and optional is set, then the validation ignores the rules and returns true.

Useful for:

• Validation rules don't need to take into account an empty input.
• An optional field will be automatically valid on render if the initial value is empty.

Motivation and Context

Right now when writing validation rules you must take into account whether you accept an empty string. Furthermore, an empty optional field will not be valid by default until the user changes it's value. This solves the problem of having optional fields that still require rules for when they are set.

How Has This Been Tested?

There are no tests yet. I want to wait and see whether the functionality is approved before writing tests.

Markup:

<template>
  <v-app>
    <v-container>
      Hola
      <v-form v-model="formValid">
        <v-text-field v-model="inputOne" optional :rules="[v => 'Rule fails']" />
      </v-form>
      {{ formValid ? "valid" : "invalid" }}
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const formValid = ref(false)

  const inputOne = ref('')
</script>

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [x] The PR title is no longer than 64 characters.
• [x] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [x] My code follows the code style of this project.
• [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Could you provide markup for your use-case?

[carlesalbasboix]

I have a form with an optional email. I want the validation to evaluate to true either if the email is valid or the input is left blank. Hence this "optional" prop that automatically evaluates the validation to true if the input is blank.

[MajesticPotatoe]

@carlesalbasboix by markup he means actual code showing how this is suppose to be used. In the PR template theres a section called Markup: with a spot to stick this code. This helps reviewers to see how your feature is intended to be used and to help validate that it works.

[carlesalbasboix]

Ah, ok, I resolved the branch conflicts and provided the markup.

[johnleider]

@KaelWD how does this fit in with our conversation regarding lazy-validation last week?

[Fadiabb]

Hi, is there a plan when this will be merged and included in a coming release ?

[johnleider]

Maybe 3.1. We are pretty much locked for v3 release at this point.

[carlesalbasboix]

@johnleider Can we consider it now that v3 has been released?

[carlesalbasboix]

Any news?

[johnleider]

@KaelWD following up on https://github.com/vuetifyjs/vuetify/pull/15191#issuecomment-1224209600

[johnleider]

Pulse check on this.