Conditional and Comparison Validators

/**
 * Makes field required when condition evaluates to true
 * @param prop - Condition (boolean, Vue ref, string property path, or function)
 * @returns ValidationRuleWithoutParams that requires field when condition is true
 */
function requiredIf(prop: boolean | Ref<boolean> | string | (() => boolean | Promise<boolean>)): ValidationRuleWithoutParams;

import { requiredIf } from "@vuelidate/validators";
import { ref, computed } from "vue";

// Static boolean condition
const isAdult = ref(false);
const adultValidation = requiredIf(isAdult.value);

// Vue ref condition
const showOptionalField = ref(false);
const conditionalRequired = requiredIf(showOptionalField);

// Function condition
const requireWhenEmailProvided = requiredIf(() => formData.email !== "");

// Async function condition
const requireWhenServerCheck = requiredIf(async () => {
  const response = await checkServerCondition();
  return response.requiresField;
});

// Property path condition (checks sibling property)
const requireWhenTypeIsPersonal = requiredIf("personalAccount");

// In validation rules
const validationRules = {
  accountType: { required },
  personalDetails: {
    requiredIf: requiredIf(computed(() => formData.accountType === "personal"))
  },
  businessName: {
    requiredIf: requiredIf(computed(() => formData.accountType === "business"))
  }
};

/**
 * Makes field required unless condition evaluates to true
 * @param prop - Condition (boolean, Vue ref, string property path, or function)
 * @returns ValidationRuleWithoutParams that requires field unless condition is true
 */
function requiredUnless(prop: boolean | Ref<boolean> | string | (() => boolean | Promise<boolean>)): ValidationRuleWithoutParams;

import { requiredUnless } from "@vuelidate/validators";
import { ref, computed } from "vue";

// Require field unless user is guest
const isGuest = ref(false);
const requireUnlessGuest = requiredUnless(isGuest);

// Require unless another field has value
const requireUnlessEmailProvided = requiredUnless(() => formData.email !== "");

// Property path condition
const requireUnlessSkipSelected = requiredUnless("skipThis");

// In validation rules
const validationRules = {
  userType: { required },
  fullName: {
    requiredUnless: requiredUnless(computed(() => formData.userType === "anonymous"))
  },
  phoneNumber: {
    requiredUnless: requiredUnless(computed(() => formData.email !== ""))
  }
};

/**
 * Validates that field value matches the reference value
 * @param equalTo - Reference value to compare against (any type or Vue ref)
 * @param otherName - Optional name for the reference field (for error messages)
 * @returns ValidationRuleWithParams with equalTo and otherName parameters
 */
function sameAs<E = unknown>(equalTo: E | Ref<E>, otherName?: string): ValidationRuleWithParams<{ equalTo: E, otherName: string }>;

import { sameAs, required } from "@vuelidate/validators";
import { ref, computed } from "vue";

// Password confirmation
const formData = ref({
  password: "",
  confirmPassword: ""
});

const validationRules = {
  password: { required },
  confirmPassword: {
    required,
    sameAsPassword: sameAs(computed(() => formData.value.password), "password")
  }
};

// Email confirmation
const emailConfirmation = sameAs(computed(() => formData.value.email), "email");

// Static value comparison
const mustBeTrue = sameAs(true);
const mustMatchCode = sameAs("EXPECTED_CODE");

// Complex object comparison
const userData = ref({ id: 123, name: "John" });
const mustMatchUser = sameAs(userData.value);

// In validation with custom field name
const validationRules2 = {
  primaryEmail: { required, email },
  confirmEmail: {
    required,
    email,
    sameAsPrimary: sameAs(computed(() => formData.value.primaryEmail), "primary email")
  }
};

import { required, requiredIf, sameAs, email } from "@vuelidate/validators";
import { computed } from "vue";

const formData = ref({
  accountType: "",
  personalInfo: {
    firstName: "",
    lastName: "",
    email: "",
    confirmEmail: ""
  },
  businessInfo: {
    companyName: "",
    taxId: ""
  }
});

const validationRules = {
  accountType: { required },
  personalInfo: {
    firstName: {
      requiredIf: requiredIf(computed(() => formData.value.accountType === "personal"))
    },
    lastName: {
      requiredIf: requiredIf(computed(() => formData.value.accountType === "personal"))
    },
    email: {
      requiredIf: requiredIf(computed(() => formData.value.accountType === "personal")),
      email
    },
    confirmEmail: {
      requiredIf: requiredIf(computed(() => formData.value.personalInfo.email !== "")),
      email,
      sameAsEmail: sameAs(computed(() => formData.value.personalInfo.email), "email")
    }
  },
  businessInfo: {
    companyName: {
      requiredIf: requiredIf(computed(() => formData.value.accountType === "business"))
    },
    taxId: {
      requiredIf: requiredIf(computed(() => formData.value.accountType === "business"))
    }
  }
};

import { required, requiredIf, sameAs } from "@vuelidate/validators";

const agreementRules = {
  agreeToTerms: { sameAs: sameAs(true) },
  agreeToNewsletter: {}, // Optional
  parentalConsent: {
    requiredIf: requiredIf(computed(() => userAge.value < 18)),
    sameAs: sameAs(true)
  }
};

import { requiredIf, requiredUnless } from "@vuelidate/validators";

const dynamicRules = {
  primaryContact: { required },
  secondaryContact: {
    requiredUnless: requiredUnless(computed(() => formData.value.primaryContact !== ""))
  },
  emergencyContact: {
    requiredIf: requiredIf(computed(() => formData.value.isMinor || formData.value.hasSpecialNeeds))
  }
};