Form validation system with built-in validators, conditional display logic, and dynamic form control mechanisms for creating intelligent, responsive forms.
Core validation system for managing field validation rules, error handling, and validation state.
/**
* Update validation rules for specific field
* @param id - Field name or rule ID
* @param validate - Array of validation rule objects
* @param merge - Whether to merge with existing rules (default: false)
* @returns Promise resolving when validation is updated
*/
updateValidate(id: string, validate: Object[], merge?: boolean): Promise<any>;
/**
* Update validation rules for multiple fields
* @param validates - Object mapping field names to validation arrays
* @param merge - Whether to merge with existing rules (default: false)
* @returns Promise resolving when all validations are updated
*/
updateValidates(validates: { [id: string]: Object[] }, merge?: boolean): Promise<any>;
/**
* Refresh validation state and re-run validations
* Triggers validation for all fields and updates error display
*/
refreshValidate(): void;Usage Examples:
// Update single field validation
await api.updateValidate("email", [
{ required: true, message: "Email is required" },
{ type: "email", message: "Invalid email format" },
{ max: 50, message: "Email too long" }
]);
// Update multiple field validations
await api.updateValidates({
password: [
{ required: true, message: "Password required" },
{ min: 8, message: "Minimum 8 characters" }
],
confirmPassword: [
{ required: true, message: "Confirmation required" },
{
validator: (rule, value, callback) => {
if (value !== api.getValue("password")) {
callback(new Error("Passwords do not match"));
} else {
callback();
}
}
}
]
});
// Merge with existing validation
await api.updateValidate("username", [
{ pattern: /^[a-zA-Z0-9_]+$/, message: "Invalid characters" }
], true);Conditional control system for dynamically showing, hiding, enabling, or disabling form fields based on other field values and conditions.
interface Control<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> {
/** Value to compare against */
value?: any;
/** Custom handler function for complex logic */
handle?: (val: any, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => boolean;
/** Control method to apply */
method?: 'display' | 'disabled' | 'hidden' | 'required';
/** Comparison condition */
condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty' | 'pattern';
/** Target fields or rules to control */
rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[] | string[];
}Usage Examples:
// Show/hide fields based on selection
const accountTypeRule = {
type: "select",
field: "accountType",
title: "Account Type",
options: [
{ label: "Personal", value: "personal" },
{ label: "Business", value: "business" }
],
control: [
{
value: "business",
condition: "==",
method: "display",
rule: ["companyName", "taxId"]
},
{
value: "personal",
condition: "==",
method: "hidden",
rule: ["companyName", "taxId"]
}
]
};
// Complex conditional logic with custom handler
const subscriptionRule = {
type: "select",
field: "subscription",
title: "Subscription Plan",
control: [
{
handle: (value, api) => {
const user = api.getValue("userType");
return value === "premium" && user === "student";
},
method: "display",
rule: ["studentDiscount"]
}
]
};
// Multiple conditions
const ageRule = {
type: "number",
field: "age",
title: "Age",
control: [
{
value: 18,
condition: ">=",
method: "display",
rule: ["driversLicense"]
},
{
value: [13, 17],
condition: "between",
method: "required",
rule: ["parentConsent"]
}
]
};API methods for programmatically controlling field visibility and state based on conditions.
/**
* Control field hidden state
* @param hidden - True to hide, false to show
* @param fields - Field names to affect (optional)
*/
hidden(hidden: boolean): void;
hidden(hidden: boolean, field: string | Array<string>): void;
/**
* Get field hidden status
* @param field - Field name to check
* @returns Boolean indicating if field is hidden
*/
hiddenStatus(field: string): boolean;
/**
* Control field display state
* @param display - True to display, false to hide
* @param fields - Field names to affect (optional)
*/
display(display: boolean): void;
display(display: boolean, field: string | Array<string>): void;
/**
* Get field display status
* @param field - Field name to check
* @returns Boolean indicating if field is displayed
*/
displayStatus(field: string): boolean;
/**
* Control field disabled state
* @param disabled - True to disable, false to enable
* @param fields - Field names to affect (optional)
*/
disabled(disabled: boolean): void;
disabled(disabled: boolean, field: string | Array<string>): void;Common validation rule patterns and configurations for comprehensive form validation.
interface ValidationRule {
/** Field is required */
required?: boolean;
/** Error message to display */
message?: string;
/** Field type validation (email, url, number, etc.) */
type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
/** Minimum length/value */
min?: number;
/** Maximum length/value */
max?: number;
/** Exact length */
len?: number;
/** Regular expression pattern */
pattern?: RegExp;
/** Custom validator function */
validator?: (rule: ValidationRule, value: any, callback: (error?: Error) => void) => void;
/** Validation trigger event */
trigger?: 'blur' | 'change' | string;
/** Transform value before validation */
transform?: (value: any) => any;
}Usage Examples:
// Common validation patterns
const validationRules = {
email: [
{ required: true, message: "Email is required" },
{ type: "email", message: "Invalid email format" }
],
password: [
{ required: true, message: "Password is required" },
{ min: 8, message: "Password must be at least 8 characters" },
{
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
message: "Password must contain uppercase, lowercase, and number"
}
],
age: [
{ required: true, message: "Age is required" },
{ type: "integer", message: "Age must be a number" },
{ min: 13, max: 120, message: "Age must be between 13 and 120" }
],
website: [
{ type: "url", message: "Invalid URL format" },
{
validator: (rule, value, callback) => {
if (value && !value.startsWith("https://")) {
callback(new Error("Website must use HTTPS"));
} else {
callback();
}
}
}
]
};Advanced validation through the effect system for dynamic and contextual validation rules.
interface ValidationEffect {
/** Component validation effect */
componentValidate?: string | boolean | {
method: string;
trigger?: string;
message?: string;
[key: string]: any;
};
/** Required field effect */
required?: boolean | string | object;
}Usage Example:
const dynamicValidationRule = {
type: "input",
field: "conditionalField",
title: "Conditional Field",
effect: {
componentValidate: {
method: "validateConditional",
trigger: "blur",
message: "Validation failed"
},
required: {
condition: "dependentField",
value: "requiredValue"
}
}
};Methods for managing validation state, errors, and form validation lifecycle.
/**
* Reset validation state for fields
* @param fields - Field names to reset (optional, resets all if not specified)
*/
resetFields(): void;
resetFields(field: string | string[]): void;
/**
* Clear validation state without resetting values
* @param fields - Field names to clear validation for
*/
clearValidateState(fields?: string | string[]): void;
/**
* Validate specific fields manually
* @param fields - Field names to validate
* @returns Promise resolving with validation results
*/
validate(fields?: string | string[]): Promise<boolean>;
/**
* Get current validation errors
* @returns Object mapping field names to error arrays
*/
getValidationErrors(): { [field: string]: string[] };Available condition functions for control rules and validation logic.
interface ConditionFunctions {
/** Exact equality */
'=='(a: any, b: any): boolean;
/** Not equal */
'!='(a: any, b: any): boolean;
/** Not equal (alias) */
'<>'(a: any, b: any): boolean;
/** Greater than */
'>'(a: any, b: any): boolean;
/** Greater than or equal */
'>='(a: any, b: any): boolean;
/** Less than */
'<'(a: any, b: any): boolean;
/** Less than or equal */
'<='(a: any, b: any): boolean;
/** Value is in array */
'in'(a: any, b: any[]): boolean;
/** Value is not in array */
'notIn'(a: any, b: any[]): boolean;
/** Array contains value */
'on'(a: any[], b: any): boolean;
/** Array does not contain value */
'notOn'(a: any[], b: any): boolean;
/** Value is between two numbers */
'between'(a: number, b: [number, number]): boolean;
/** Value is not between two numbers */
'notBetween'(a: number, b: [number, number]): boolean;
/** Value is empty */
'empty'(a: any): boolean;
/** Value is not empty */
'notEmpty'(a: any): boolean;
/** Value matches pattern */
'pattern'(a: string, b: string): boolean;
}This comprehensive validation and control system enables the creation of sophisticated, responsive forms with complex conditional logic and comprehensive validation coverage.