Validation

This plugin provides an easy way to validate input value. You can use it with t-input components.

Learn more about forms.

Basic

For example, pass the value to the required method. It will return a message when it's not valid, and nothing when it's valid.

No message
import { TCard } from "@dija/tohama-components";
import { useValidation } from "@dija/tohama-plugins";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    const validation = useValidation();

    const message = ref<string>();

    const onValidate = (value?: string) => {
      // Pass the value to the `required` method.
      // It will return a message when it's not valid, and nothing when it's valid.
      return validation.required(value);
    };

    const onInput = (event: Event) => {
      const element = event.target as HTMLInputElement;
      message.value = onValidate(element.value);
    };

    return () => (
      <>
        <TCard design="raised" mb p>
          {message.value ?? "No message"}
        </TCard>

        <TCard design="outlined" p>
          <input placeholder="Enter a value" onInput={onInput} />
        </TCard>
      </>
    );
  },
});

Eager Multiple Rules

No message

Pass multiple rules to the validate method. It will validate the rules together to return the first message.

import { TCard } from "@dija/tohama-components";
import { useValidation } from "@dija/tohama-plugins";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    const validation = useValidation();

    const message = ref<string>();

    const onValidate = (value?: string) => {
      // Pass multiple rules which will be validated together to return the first message.
      return validation.validate(validation.required(value), validation.email(value));
    };

    const onInput = (event: Event) => {
      const element = event.target as HTMLInputElement;
      message.value = onValidate(element.value);
    };

    return () => (
      <>
        <TCard design="raised" mb p>
          {message.value ?? "No message"}
        </TCard>

        <TCard design="outlined" p>
          <input placeholder="Enter an email" onInput={onInput} />
        </TCard>
      </>
    );
  },
});

Lazy Multiple Rules

No message

Pass multiple rules to the rules method. It will validate the rules in the order they are provided and return the first message.

import { TCard } from "@dija/tohama-components";
import { useValidation } from "@dija/tohama-plugins";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    const validation = useValidation({
      defaultCountry: "SA",
    });

    const message = ref<string>();

    const onValidate = async (value?: string) => {
      // Pass multiple rules which will be validated in the order they are provided to return the first message.
      return validation.rules(
        () => validation.required(value),
        () => validation.laxPhoneNumber(value)
      );
    };

    const onInput = async (event: Event) => {
      const element = event.target as HTMLInputElement;
      message.value = await onValidate(element.value);
    };

    return () => (
      <>
        <TCard design="raised" mb p>
          {message.value ?? "No message"}
        </TCard>

        <TCard design="outlined" p>
          <input placeholder="Enter a Saudi phone number" onInput={onInput} />
        </TCard>
      </>
    );
  },
});

Usage with t-input-text

Handle the validation in the onValidate callback which will take care of the rest. Note that all of t-input components share the same validation API.

import { TInputText, TInputTextController } from "@dija/tohama-components";
import { useValidation } from "@dija/tohama-plugins";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const validation = useValidation();

    const field = TInputTextController.create({
      validationMode: "input",
      onValidate: ({ value }) => {
        return validation.validate(validation.required(value), validation.email(value));
      },
    });

    return () => (
      <TInputText
        controller={field}
        design="outlined"
        label="Email"
        placeholder="Enter an email"
        persistentPlaceholder
      />
    );
  },
});

Plugins

Translate

Docs

Utilities

Table of Contents