npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@convidera-team/vue-form-validator

v1.1.4

Published

## Installation

Downloads

792

Readme

Form validator

Installation

yarn add @convidera-team/vue-form-validator

or

npm install @convidera-team/vue-form-validator --save

Basic usage

<script lang="ts" setup>
import {
  useFormValidator,
  isFormValidatorError,
  isAxiosError,
} from '@convidera-team/vue-form-validator';

const rules = useRules();
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required('The field is required'),
]);

const email = form.addField('email', '', [
  rules.required('The field is required'),
  rules.email('The field should be email'),
]);

const password = form.addField('password', '', [
  rules.required('The field is required'),
  rules.min(6, 'The field should be min 6 characters'),
]);

const passwordConfirmation = form.addField('password_confirmation', '', [
  rules.required('The field is required'),
  (value) => rules.confirmed(password.value.value, 'The confirmation is incorrect')(value),
]);

async function submit() {
  try {
    // If there are any validation errors, they will be thrown and apiRequest will not be called
    await form.handleSubmit(() => apiRequest({
      name: name.value.value,
      email: email.value.value,
    }));
  } catch (error) {
    if (isFormValidatorError(error)) {
      // Catch form validation errors
      console.warn(error.list);
    } else if (isAxiosError(error)) {
      // Catch axios errors
      console.warn(error.response?.data);
    } else {
      throw error;
    }
  }
}
</script>

<template>
  <form @submit.prevent="submit">
    <input
      v-model="name.value.value"
      label="Name"
      :valid="name.valid.value"
      @blur="name.validate()"
    >
    {{ name.errors.value[0] }}

    <input
      v-model="email.value.value"
      label="email"
      :valid="email.valid.value"
      @blur="email.validate()"
    >
    {{ email.errors.value[0] }}

    <input
      v-model="password.value.value"
      label="password"
      type="password"
      :valid="password.valid.value"
      @blur="password.validate()"
    >
    {{ password.errors.value[0] }}

    <input
      v-model="passwordConfirmation.value.value"
      label="passwordConfirmation"
      type="password"
      :valid="passwordConfirmation.valid.value"
      @blur="passwordConfirmation.validate()"
    >
    {{ passwordConfirmation.errors.value[0] }}

    <button
      type="submit"
    >
      submit
    </button>
  </form>
</template>

When you do form.addField('name', initialValue, [list of rules]) you give the field a name, initial value and list of validation rules. The name is used to identify the field in the form. For example in case of api error you want to show the error specified in error response for the field. if apiRequest in await form.handleSubmit(() => apiRequest()); fails due to api validation errors, the errors returned by api will be mapped to the fields in the form using the name specified during form.addField('fieldName'). So make sure to name fields in the same way as they are named in the api response.

You can run yarn dev to see basic usage in browser.

It's also possible to add validation rules after the field is created

const newPassword = form.addFiled('newPassword', '', [
  ...someValidationRules
]);

const passwordConfirmation = form.addFiled('passwordConfirmation', '', [
  (value) => rules.confirmed(newPassword.value.value)(value),
]);

const currentPassword = form.addFiled('currentPassword', '', [
  (value) => rawRules.requiredIf([
    newPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if new password and password confirmation provided')(value),
]);

newPassword.addRules([
  (value) => rawRules.requiredIf([
    currentPassword.value.value,
    passwordConfirmation.value.value,
  ], 'Required if current password and password confirmation provided')(value),
]);

Example of custom requiredIf rule

You can also create your own rules if predefined do not fit you. here is a TS example of a custom requiredIf rule:

import {
  LocationTypeEnum,
} from 'project-specific';
import {
  useFormValidator,
  TFormValidatorRule,
} from '@convidera-team/vue-form-validator';

const requiredIf: (type: LocationTypeEnum) => TFormValidatorRule<undefined> = (type) => () => locationType.value.value === type;
const form = useFormValidator();
const address = form.addField(
  'address',
  undefined,
  [
    requiredIf(LocationTypeEnum.PHYSICAL),
  ],
);

Available validation rules

Please check here

Translations for vue-i18n

Important

When adding new translations, make sure to also adjust src/form-validator/translation/schema.ts file as it provides typescript support.

The package provides en and de translations which could be used to extend vue-i18n translations:

// English translation file
import {
  en as formValidation,
} from '@convidera-team/vue-form-validator';

export default {
  // other translations
  ...formValidation,
}

Then it's possible to use formValidator default translations directly without the need to specify text for each validation rule:

import {
  useI18n,
} from 'vue-i18n';
import {
  useRules
} from '@convidera-team/vue-form-validator';

const {
  t,
} = useI18n();

const rules = useRules(t);
const form = useFormValidator();

const name = form.addField('name', '', [
  rules.required(),
]);

If you don't want to use default translations but have your own, you can override translations provided by formValidator in your translation files. For this you can take the same keys provided for example in en.ts file and override them in your translation:

// Translation file
export default {
  // other translations
  formValidator: {
    required: 'Custom message for required rule',
    email: 'This field should be email',
    min: 'Custom message for min rule {min}',
    // Other overrides
  },
}

In the same way you can add translations for other languages as well.

Changelog

1.1.3

  • update dependencies