[Bug Report][3.4.7] Changing :rules of Vuetify Inputs does not affect the validation

[peter-mueller]

Environment

Vuetify Version: 3.4.7
Last working version: 2.3.0
Vue Version: 3.4.0-beta.2
Browsers: Chrome 119.0.0.0
OS: Windows 10

Steps to reproduce

Warning: possible duplicate, could be closed because of high complexity, but i've found no workaround to make it work securely in my big application, read other comments

• Input "aa"
• Enable the checkbox (replaces the rules array with different rules)
• Focus Input
• Blur Input

Expected Behavior

Changing the Rules should immediately change the valid status of the form to not allow invalid inputs/confusion of the user. The error message should be immediately displayed.

Actual Behavior

Dynamically replacing the rules array of an input does not trigger a revalidation. This leaves the form valid, until the user revisits the input.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

The behavior of showing/hiding the error message on first form input of the user is already very complex. Dynamic rules make this even more complex. Should a changing rule always make the Input immediality show the error or only if its already dirty/has some input? I could'nt test some combinations, because i failed to find/access the isDirty/isPrestine state of the input.

I've found #8698 (comment). And tried the validate(silent: true) option, which didn't help me because i couldn't find a isDirty state. The <v-validation :rules="[rules]"> is not usable to me because i've found no documentation on how to use it with all the existing variants of inputs, having to write the inputs on my own would make me question the use of the framework for my size of application.

---

Edit: The following snippet is my current wip workaround in my Compontent that wraps v-text-field that does not completly work because the way of getting the silent value is not robust/consistent on prisitine/dirty inputs.

const vtextfield = ref<
  | (ComponentPublicInstance & { validate: (silent: boolean) => Promise<string[]>,})
  | null
>(null);

watch(() => props.rules, () => {
  nextTick(() => validate());
}, {deep: true})

async function validate(): Promise<void> {
  const silent = props.modelValue === '' || props.modelValue === null || props.modelValue === undefined;
  await vtextfield.value?.validate(silent);
}

---

Edit2: Another Workaround i've found looks like this (⚠️ didn't work consistent for me):

<v-text-field ref="vtextfield">
    <template v-slot:append="{isDirty}">
       {{_workaroundDirty(isDirty.value)}}
    </template>
</v-text-field>

<script lang="ts">

watch(() => props.rules, () => {
  nextTick(() => validate());
}, {deep: true})

const dirty= ref<boolean>(false);

function _workaroundDirty(isDirty: boolean): string {
  dirty.value = isDirty;
  return "";
}

async function validate(): Promise<void> {
  const silent = !dirty.value;
  await vtextfield.value?.validate(silent);
}
</script>

---

Edit 3: Because we had to move on in our project we decided to replace the rules evaluation and v-form with our own typescript code and just pass errors to the inputs. Therefore the issue is no longer relevant to us. I'll leave it open to document that the migration was quite effortful and others might arrive at this problem.

[qxygene]

_rules must be reactive.

const _rules = reactive({
  required: (v) => !!v || 'required',
  isValid: (v) => /^.{3,}$/.test(v) || 'min 3',
});

[peter-mueller]

  function _rules(additionalrule: boolean) {
   if (additionalrule) {
      return [isRequired, atleastlength3];
   }
   return [isRequired];

I made sure to return new arrays and not modify them to avoid reactivity issues in the example of the issue.

---

Because we had to move on in our project we decided to replace the rules evaluation and v-form with our own typescript code and just pass errors to the inputs. Therefore the issue is no longer relevant to us. I'll leave it open to document that the migration was quite effortful and others might arrive at this problem.

[Martin-Idel]

@qxygene: Reactivity seems not to help. We have the same problem in various components and the rules are computed. This is a regression with respect to Vuetify 2.

[billybraga]

This is affecting us also.

[santhikumar43]

Rules are not reactive, This is creating lot of problems.
Dependent fields are not working Vuetify Playground

Here the last name is dependent on first name, once first name is filled then last name field should show as a required automatically and it was working in vuetify v2 but now i need to click on submit or focus in and focus out of the last name field to show that field as required.

[laventnc]

Was about to create a similar issue report and stumbled upon this.

For another example: see this playground

The required rule on the 'First Name' field is only set if the 'Last Name' field has a value. Therefore, clearing the 'Last Name' should remove the error state/message. The error state is removed, but the message still remains

[johnleider]

After extended consideration for this, I'm opting not to make any changes. There are too many potential use-cases for how users are consuming rules that it would overall be better to invoke validation manually.

https://play.vuetifyjs.com/#eNqNVU2PmzAQ/StTDl0iJSA1VaumCd1VpUq9Vauql2VVOTAk7oKhtmG3yua/d/yRAEkOuYAZv5n3PB/mYRcomcV3TRN1LQaLYKmxakqmMUkFwLKbsaaxS/uR1UIzLlB6kzNuMXta1y8HE0DJ1liu0oBpKJEp8xQbvYV5GvSgblbVuYPlOde8FqyUbYk9JlnGffQhY1HLCiQW5GuWaTAI1rGS52lwhFsHjS96VnAs894MPoJgFX4XTauH4obyKrUZby2MTEU7v+0iHOufDMFxL5vOYsSS4WjKeZf8MnoXsNtZ4fv9MjbWEeTuGP+e4hvsmPGi09e6FRrqAqxG43RZbeRqM45hEz+o9bEB1lr4tElUSCmD26zk2ZOvRGStIaUguTcr+EZGE4z8XEPR2nXUMh50Gn2qTPJGAzm1DTWQ2FBIrXwhedXUUsPOcE9BUDV/EukUnpnOtrCHQtYV3FAH35hYxoPUU99R6WBlnJZKSy42SXjD2M2kB9ike8i6rqlbxatoyzIJJ5971DhlY3gSFqxUOITb9nQgc/5xrGO7eYStP2WBrUt0SHtgoVEWLEMY7gPsXCWsbDKGilP59AK8mMkCflAquEJ/4IdHm7/9aVSj6xDM1szT0CFDCtLVPLea/e7I5oMVrcgMHri6x78tl5iH3QIcL+HdAl5ByxYPXLyAsIPVagU0JcHkYDY0upWCrNLHSgMvgOgGABNsqGKgg2l72bh+nl+r5c0KTMHh7Vvo/CzAEuaXpFUt1W/LOiQqf7HNIdsySW16hdhR0i4OY19Hz24knszrma6HPv/Tkxw8OlVO1DncbftE2lE6IZtCOIFVcqA8zF3orMdOjqgdW/xiXq4r3UTYMdvTcxm74aZWDKaBm+VZxZroj6oF/XNs+NRvUC7psnKEdJu39D9Y0GKrdaMWcZzlgtzoYuadjATqWDRVfEuwWNJ9xyuc5XV1O4/eR+8+0oWm9NAeoapma1k/K5QUJQ2mAx7Ni39XcHkkUXyIPjkGb5rRb08ZirPQMfF1KGcSRY4S5bVHOnEbHetk7+xovrT7YD81/W0fj/8BEGOjyA==

Thank you for your contribution and interest in improving Vuetify! Make sure to join us in the Discord community.