1. ottervalidationvue

ottervalidationvue

OtterValidationVue

Fast, lightweight validation with full typescript support for Vue 3

OtterValidationVue is a Vue 3 wrapper for OtterValidation

Installation

 npm install ottervalidationvue

Full example with Vue 3 class component

 <template>
  <form novalidate @submit.prevent="submit()">
    <label for="email">Username</label>
    <input id="email" v-model="ovv.object.email.model" type="text">
    <small v-if="ovv.object.email.errors" v-text="$t(ovv.object.email.errors[0])" />
    <br>
    <label for="password">Password</label>
    <input id="password" v-model="ovv.object.password.model" type="password">
    <template v-if="ovv.object.password.errors">
      <small v-for="error in ovv.object.password.errors[0]" :key="error" v-text="error" />
    </template>
    <br>
    <input type="submit" text="Submit">
  </form>
</template>
 <script lang="ts">
  import { Vue } from "vue-class-component";
  import { createOVV, OVValidation, OVVConfiguration } from "ottervalidationvue";

  interface Form {
    email: string;
    password: string;
  }

  export default class LoginForm extends Vue {
    public form: Form = {
      email: "",
      password: "",
    };

    public validation: OVValidation<Form> = {
      email: {
        required: true,
        email: true,
      },
      password: {
        required: true,
        minLength: 8,
        maxLength: 128,
        minLowerCase: 1,
        minUpperCase: 1,
        minNumeric: 1,
        minSymbol: 1,
      },
    };

  public configuration: OVVConfiguration = {
    errorMessage: {
      prefix: "validation",
    },
  };

  public ovv = createOVV(
    this.form,
    this.validation,
    this.configuration
  );

  public submit(): void {
    if (this.ovv.errors) {
      return;
    }

    // Submit this.form
  }
}
</script>

Validation types

See Readme#validation-types inside OtterValidation

Configuration

OVVConfiguration extends from OVConfiguration and has currently no specific keys.

See Readme#Configuration and Example inside OtterValidation

Contributing

 # install dependencies
npm install

# run linter
npm run lint

License

MIT