Validation

t-input components' controllers provide a onValidate callback. The onValidate callback is called based on the validationMode you specify. When the value is invalid, return a message which will be displayed below the field, otherwise return nothing. You can also validate input value asynchronously.

Helpers

To simplify input validation, use the @dija/tohama-validation. Take a rule from the package and provide it with the input value. The rule will return a boolean result.

Additionally, you can use the use-validation plugin which uses @dija/tohama-validation internally with additional helpful features such as localization and rules chaining.

Example

In this example, we're modifying the previous example to add input validation. We added a TInputTextController and attached to a t-input-text component.

export default defineComponent({
  setup() {
    const form = TFormController.create();

    const field = TInputTextController.create({
      onValidate: ({ value }) => {
        if (!required(value)) {
          return "Email is required";
        }
        if (!email(value)) {
          return "Your input is not a valid email";
        }
      },
    });

    const onSubmit = async () => {
      const status = await form.submit();
      // Check your console logs
    };

    return () => (
      <TForm controller={form}>
        <TInputText controller={field} label="Email" />
        <TButton onClick={onSubmit}>Submit</TButton>
      </TForm>
    );
  },
});