Provide types as inspired by #175.

Main types:

• Vuelidate = PluginFunction for Vue.use(Vuelidate)
• ComponentOptions.validations
• Vue.$v

Some of the predefined predicates are covered, may be not all.

I'm trying to use the vuelidate plugin with my vue-router-enabled web app. I keep getting the following error:

[Vue-warn]: Property or method "$v" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

This is my bootstrap file for reference:

`import Vue from 'vue' import Resource from 'vue-resource' import App from "./components/App.vue" import router from "./router/appRouter.js" import store from "./store/appStore.js"

Vue.use(Resource); Vue.use(Vuelidate);

const app = new Vue({ el: '#app', router, store, render: (h) => h(App) }) `

I'm using the plugin with the following code in component file:

<template>
<div>
    <div :class="'input-group ' + {'form-group-error': $v.email.$error }"> 
    <p class="label"> Email </p>
    <input type="text" id="email" v-model="models.email" @input="$v.email.$touch">
    </div>
</div>
</template>

<script>
    const { required, minLength, alpha, email, numeric } = require("vuelidate/lib/validators");
    export default 
    {
        data(){...},
        methods:{...},
        etc
    }
<script>

I can't figure out how to reference $v in my code to allow the vue instance to access it. Sorry in advance if I'm missing something blindingly obvious but I've stuck on this for a while

Thanks

The name of the validator implies it is looking for any numeric value, including decimal and negative values. The current implementation only accepts positive integers. Either the accepted validation text should be broadened or this validator should be renamed.

Example: https://jsfiddle.net/gregpeden/hmcLdc5a/

I could provide a PR for this (fix this + provide actual integer test) if there is interest in changing it.

I would also like to have a value that is similar to $dirty with the difference being that it is true if any (rather than all) of the children are $dirty. The purpose to make it easy to track if there have been any changes in the overall form or a specific section of the form - e.g. certain actions will be available if even only one value has changed.

I am just not sure how best to do this. I understand that $dirty is a computed value, so preferably I would like to add a complementary computed value to $dirty (e.g. $anydirty) to be access in a similar manner to the $dirty value. If anyone in the know has some guidance on the best way to achieve this it would be greatly appreciated.

An Error occurs as soon as I uncomment the following line:

function useApplicationPluginsAndComponents (Application) { // Application.use(VueCompositionAPI) // causing error Application.use(router) Application.use(store) registerGlobalComponents(Application) return Application }

Uncaught Error: [vue-composition-api] only works with Vue 2, v3.0.0-rc.3 found.

Does vuelidate work with vue3?

Is it possible to define a rule where a collection is not required, but if it exists (eg a user chooses to add an item to the collection) then subfield(s) are required?

I tried setting up a rule like this but got "TypeError: Cannot convert undefined or null to object" in console when the collection did not exist on certain records.

Describe the bug I'm trying out vuelidate 2 alpha with typescript and vite, and there seems to be an issue with the typescript linter complaining about the types ComputedRef<{}> and ValidationArgs<{}>. I was following the instructions provided in making vuelidate rules, and I don't know why there's an error with typescript regarding the manner. Is there some sort of thing that I should've done that I don't know about? Like some sort of typecasting?

Reproduction URL I apologise if I wasn't able to use the provided codesandbox templates provided, since the issue is on vite and not on vue-cli. Provided here is the URL of the code. The issue cannot be seen through codesandbox, and it will only be visible if you check the typescript linting on vscode itself. The file and line in question is on ./src/components/FormComposition.vue on ln 32.

To Reproduce Steps to reproduce the behavior:

1. Create a new vite project using the terminal using the vue-ts template: yarn create vite --template vue-ts vuelidate-issue-test.
2. Open the project on VS Code.
3. Open the VS Code inbuilt terminal and run yarn to initialise the project.
4. Install vuelidate/core and vuelidate/validators onto the project: yarn add @vuelidate/core @vuelidate/validators.
5. Create a new vue file component called Form.vue in src/components folder.
6. Copy the code written below.

// Form.vue

<script lang="ts" setup>
import { useVuelidate } from "@vuelidate/core";
import { required, email, minLength, sameAs } from "@vuelidate/validators";
import { reactive, computed } from "vue";

const state = reactive({
  email: "",
  password: {
    pass: "",
    confirm: "",
  },
});

const rules = computed(() => {
  return {
    email: { required, email },
    password: {
      pass: { required, minLength: minLength(6) },
      confirm: { required, sameAs: sameAs(state.password.pass) },
    },
  };
});

// const rules = {
//   email: { required, email },
//   password: {
//     pass: { required, minLength: minLength(6) },
//     confirm: { required, sameAs: sameAs(state.password.pass) },
//   },
// };

const v$ = useVuelidate(rules, state);

const submitForm = () => {
  // vuelidate validation
  v$.value.$validate();

  // if success
  if (!v$.value.$error) {
    alert("Form Successfully Submitted!");
  }
  // // if fail
  // else {
  //   alert(
  //     "I'm sorry, you seem to not have filled all inputs. Please fill them up and try again."
  //   );
  // }
};
</script>

<template>
  <div class="root">
    <h2>Create an Account</h2>
    <p>
      <input type="text" v-model="state.email" placeholder="Email" />
      <span v-if="v$.email.$error">
        {{ v$.email.$errors[0].$message }}
      </span>
    </p>
    <p>
      <input
        type="password"
        v-model="state.password.pass"
        placeholder="Password"
      />
      <span v-if="v$.password.pass.$error">
        {{ v$.password.pass.$errors[0].$message }}
      </span>
    </p>
    <p>
      <input
        type="password"
        v-model="state.password.confirm"
        placeholder="Confirm Password"
      />
      <span v-if="v$.password.confirm.$error">
        {{ v$.password.confirm.$errors[0].$message }}
      </span>
    </p>
    <button @click="submitForm">Submit</button>
  </div>
</template>

7. Go back to the App.vue file, and update the file as is:

// App.vue

    <script setup lang="ts">
-    // This starter template is using Vue 3 <script setup> SFCs
-    // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-    import HelloWorld from './components/HelloWorld.vue'
+    import Form from './components/Form.vue'
    </script>
    
    <template>
-      <img alt="Vue logo" src="./assets/logo.png" />
-      <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+      <Form />
    </template>

    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

8. Run the development server using yarn dev.

Expected behavior There are no errors when running it in the development server, but the only issue is that the typescript linter is complaining about incompatible types.

Screenshots

Additional context I was following a tutorial by LearnVue, and when I reached the section where the tutorial is converting the code from the options api to the composition api, and I stumbled upon on how to initialise the useVuelidate() method. When I tried doing it myself, the typescript lint `Argument of type 'ComputedRef<{email: required...}>' is not assignable to parameter of type 'ValidationArgs<{email: string;...}>'.

https://jsfiddle.net/gLg17z9o/

Try to click Validate => it turns to red. Now try to fill field - validation stays red.

Fill field => it turns green. Clear field => it stays green.

Replace

{{$v.form.password.$error}}

{{$v.form.password}}

Hey, I'm trying to use the next branch with Vue 2.6 and Composition API (in quasar framework), but it doesn't work, I got the following error :

TypeError: Object(...) is not a function
    at useVuelidate (index.esm.js?dc83:580)
    at useRegisterForm (use-register-form.ts?f336:57)

Quasar Framework is not yet shipped with Vue 3, so I tried the old version of Vuelidate, I export the validations object in the setup function but I think it has no effect as I can't find the $v object.

import { reactive, toRefs, defineComponent } from '@vue/composition-api'
import { api } from 'boot/axios'
import {
  required,
  email,
  minLength,
  sameAs
} from 'vuelidate/lib/validators'

type Selected = {
  label: string,
  value: string | number
}

export default function useRegisterForm () {
  const state = reactive({
    lastName: '',
    firstName: '',
    email: '',
    address: '',
    password: '',
    passwordConfirmation: '',
    terms: false,
    dialCode: 0,
    zipCode: null,
    mobile: '',
    countries: [] as Array<Selected>,
    country: {
      label: null,
      value: null,
      iso: null,
      dial_code: null
    },
    states: [] as Array<Selected>,
    state: {
      label: null,
      value: null
    },
    cities: [] as Array<Selected>,
    city: {
      label: null,
      value: null
    }
  })

  const validations = {
    email: {
      required,
      email
    }
  }

  // METHODS
  async function onSubmit (): Promise<void> {
    try {
      const { data } = await api.post<Array<Record<string, any>>>('/register', {
        last_name: state.lastName,
        first_name: state.firstName,
        email: state.email,
        mobile: `+${state.dialCode}${state.mobile.replace(/\s/g, '')}`,
        country: state.country.value,
        state: state.state.value,
        city: state.city.value,
        address: state.address,
        zip_code: state.zipCode,
        password: state.password,
        password_confirmation: state.passwordConfirmation,
        terms: state.terms
      })
    } catch (e) {
    }
  }

  return {
    state,
    onSubmit,
    validations
  }
}

export default defineComponent({
    name: 'Register',
    setup (props, context) {
        const { state, onSubmit, validations } = useRegisterForm()

        return {
           ...toRefs(state as any),
           validations
      }
   }
})

I have no JS error. Any idea please?

Hey,

I am also having some difficulty getting this to work, not sure where I am going wrong. Some guidance would be very much appreciated.

app.js

import Vue from 'Vue'
import Vuelidate from 'vuelidate'
import { required, alpha, email } from 'vuelidate/lib/validators'

Vue.use(Vuelidate)

new Vue({
  el: '#form',
  data: {
    name: '',
    email: '',
  },
  validations: {
    name: {
      required,
      alpha,
    },
    email: {
      required,
      email,
    },
  },
})

Here is my html

<form id="form">

<input type="text" placeholder="Name" v-model="name" name="name">
<span v-if="!$v.name.alpha">Please enter a valid name.</span>

<input type="text" placeholder="Email" v-model="email" name="email">
<span v-if="!$v.email.email">Please enter a valid email.</span>

</form>

When I try to output {{ $v }} I get nothing either.

name: {
  required,
  minLength: minLength(6)
  maxLength: withMessage(maxLength, 10)
}

function withMessage (rule, ...args) {
  const wrapRule = rule(...args)
  wrapRule.messageParams = () => args
  return wrapRule
}

function required (x) {
  return !!x
}

required.messageParams (x) {
  return
}

Describe the bug When adding external error to vuelidate, it does not add into field
One of the examples I as able to add only to fields that have rules
In other example I just can't add at all
I do not tested in Options API

Reproduction URL This just does not work at all

This does not work for input without rules

Summary

Just some clarifications on version requirements and v$ usage I noticed while browsing the docs. See the individual commit messages for details.

Metadata

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [x] Other, please describe: docs

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

Other information:

The v$ object is not initialised correctly when a component is tested with Vitest. I have a very simple component with a checkbox bound to formData.accepted

  validations () {
    return {
      formData: {
        accepted: {
          required,
          sameAs: sameAs(true)
        }
      }
    }
  }

Vuelidate is initialised within the component as per the docs

  setup () {
    return {
      v$: useVuelidate({ $autoDirty: true })
    }
  },

When I run the following test under Jest, it passes

  it('click save button', async () => {
    const wrapper = mount(MyComponent)

    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
    await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
    expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
  })

However, if I run the same test using Vitest it fails because wrapper.vm.v$.formData is undefined because v$ is incorrectly initialised to:

v$ {
  "$dirty": false,
  "$path": "__root",
  "$model": null,
  "$error": false,
  "$errors": [],
  "$invalid": false,
  "$anyDirty": false,
  "$pending": false,
  "$silentErrors": [],
  "$validationGroups": {}
}

By contrast, when the Jest test is run, v$.$silentErrors is not empty, and the following property path returns a value

v$.formData.accepted.$invalid 

What should I do to ensure that v$ is initialised correctly when the test is run with Vitest?

Dependencies

• Vue 2.7.14
• Vuelidate 2.0.0

Make sure that you are familiar with documentation before submitting an issue.

https://vuelidate.netlify.com/

Describe the bug I want to validate image ratio before uploading to the database, but i got error like bellow when implementing validation using async method.

export const fileRatioValidator = () =>
  helpers.withAsync(async (value: File) => {
    const url = URL.createObjectURL(value)
    const isSquare = new Promise((resolve, reject) => {
      const img = new Image()
      img.addEventListener('load', () => {
        resolve(img.width / img.height === 1)
      })
      img.addEventListener('error', err => {
        reject(err)
      })
      img.src = url
    })
    return await isSquare
  })

Screenshots

Describe the bug I tryied to use Vuelidate for Vue 3 in Nuxt 3.0.0 (stable version), and i got some error in my console when i tried to install these packages:

npm install @vuelidate/core @vuelidate/validators

I got these errors:

npm ERR! Could not resolve dependency: npm ERR! dev @vuelidate/core@"^2.0.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/vue npm ERR! peer vue@">= 2.5 < 2.7" from @vue/[email protected] npm ERR! node_modules/@vue/composition-api npm ERR! peerOptional @vue/composition-api@"^1.0.0-rc.1" from @vuelidate/[email protected] npm ERR! node_modules/@vuelidate/core npm ERR! dev @vuelidate/core@"^2.0.0" from the root project

To Reproduce Create a new Nuxt 3 project and try to install Vuelidate

Expected behavior Vuelidate works on Nuxt 3

Anyone could help-me? I don't know if i'm doing something incorrect or somenting like this.

*edited for more concise post.....original and more detailed post is mirrored here: https://stackoverflow.com/questions/74695360/vue-2-and-vuelidate-2-validating-a-child-component-from-a-custom-npm-component

Context:

• I am building a reusable Vue component library with built-in Vuelidate validations; with the aim of triggering / validating components when they are used in other projects (for example I am now using them in a Vue 2.7 app).
• Vuelidate is peerDependency and not bundled with the component library.
• Vuelidate and validation works as expected when developing / prototyping with Storybook and Jest.
• NPM bundling jsconfig: "compilerOptions": { "target": "es5", "module": "esnext"}
• I've set up Vuelidate exactly the same way in my Vue app (front end app) and in Storybook (prototyping and developing app).

Issue:

• Components do not validate in Vue 2.7 app, as they typically would when testing in Storybook and Jest (before library compilation).

Expected behavior:

• Vuelidate validating reusable library components when used in other projects.

• The "value" (coloured in red) is a property within the validations() hook / object, which disappears when the reusable component is used in Vue projects.