Input Validation

Field-level validation with real-time feedback.

Basic Validation

<InputText
  label="Email"
  name="email"
  required
  validation={{
    types: ["email"],
  }}
/>

Multiple Rules

<InputText
  label="Email"
  name="email"
  required
  validation={{
    rules: [
      {
        type: "email",
        errorMessage: "Please enter a valid email address",
      },
    ],
    success: {
      message: "Email looks good!",
    },
  }}
/>

Unique Validation

Check if a value already exists in the database:

<InputText
  label="Username"
  name="username"
  required
  validation={{
    unique: {
      collection: "users",
      field: "username",
      errorMessage: "This username is already taken",
      exempt: existingUser ? { uuid: existingUser.uuid } : undefined,
    },
  }}
/>

Validation Types

Common validation types:

  • email - Valid email format
  • mobilePhone - Phone number
  • strongPassword - Password strength
  • alphanumeric - Letters and numbers only
  • alphanumericWithSpaces - Letters, numbers, and spaces
  • simpleUsername - Letters, numbers, hyphens, underscores
  • number - Numeric with optional min/max

Number Validation

<InputText
  label="Age"
  name="age"
  validation={{
    rules: [
      {
        type: "number",
        min: 18,
        max: 120,
        errorMessage: "Age must be between 18 and 120",
      },
    ],
  }}
/>

Password Validation

<InputText
  label="Password"
  name="password"
  type="password"
  validation={{
    rules: [
      {
        type: "strongPassword",
        options: {
          minLength: 8,
          minLowercase: 1,
          minUppercase: 1,
          minNumbers: 1,
          minSymbols: 1,
        },
        errorMessage: "Password must be stronger",
      },
    ],
  }}
/>

Success Messages

Show feedback when validation passes:

<!-- With message -->
validation={{ success: { message: "Looks good!" } }}


<!-- Without message (just visual indicator) -->
validation={{ success: true }}