CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-form-create--core

Vue.js low-code form rendering engine that generates dynamic forms through JSON configuration with validation, data binding, and component management capabilities.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

validation.mddocs/

Validation and Control System

Form validation system with built-in validators, conditional display logic, and dynamic form control mechanisms for creating intelligent, responsive forms.

Capabilities

Validation Management

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);

Control System

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"]
    }
  ]
};

Conditional Display Methods

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;

Validation Rule Types

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();
        }
      }
    }
  ]
};

Effect-Based Validation

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"
    }
  }
};

Validation State Management

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[] };

Built-in Condition Functions

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.

docs

component-system.md

data-binding.md

form-api.md

form-creation.md

form-factory.md

index.md

rule-system.md

validation.md

tile.json