# ๐งช **Advanced Validation System Guide**
**leptos-shadcn-ui v0.6.1** introduces a comprehensive validation system with TDD implementation, real-time feedback, and enterprise-grade quality standards.
---
## ๐ **Quick Start**
### **Basic Validation**
```rust
use leptos_shadcn_input::{Input, InputValidator, validation_builders};
let email_validator = validation_builders::email_validator("email");
view! {
}
```
### **Custom Validation**
```rust
let custom_validator = InputValidator::new("username")
.required()
.min_length(3)
.max_length(20)
.custom(|value| value.starts_with("user_"));
view! {
}
```
---
## ๐ง **Validation Rules**
### **Built-in Validators**
#### **Email Validator**
```rust
let email_validator = validation_builders::email_validator("email");
// Validates: required + email format
```
#### **Password Validator**
```rust
let password_validator = validation_builders::password_validator("password");
// Validates: required + min length 8 + pattern (uppercase, lowercase, digit)
```
#### **Username Validator**
```rust
let username_validator = validation_builders::username_validator("username");
// Validates: required + min length 3 + max length 20 + alphanumeric + underscore
```
#### **Phone Validator**
```rust
let phone_validator = validation_builders::phone_validator("phone");
// Validates: phone number format with international support
```
### **Custom Validation Rules**
#### **Required Field**
```rust
let validator = InputValidator::new("field_name").required();
```
#### **Length Validation**
```rust
let validator = InputValidator::new("field_name")
.min_length(5)
.max_length(100);
```
#### **Pattern Validation**
```rust
let validator = InputValidator::new("field_name")
.pattern(r"^[a-zA-Z0-9]+$".to_string());
```
#### **Custom Function**
```rust
let validator = InputValidator::new("field_name")
.custom(|value| value.contains("special"));
```
---
## ๐ฏ **Advanced Usage**
### **Multi-field Validation**
```rust
use leptos_shadcn_input::{ValidationContext, validation_builders};
let mut context = ValidationContext::new();
context.add_validator(validation_builders::email_validator("email"));
context.add_validator(validation_builders::password_validator("password"));
// Validate all fields
let mut form_data = std::collections::HashMap::new();
form_data.insert("email".to_string(), "user@example.com".to_string());
form_data.insert("password".to_string(), "StrongPass123".to_string());
let result = context.validate_all(&form_data);
if result.is_valid {
// Proceed with form submission
}
```
### **Real-time Validation**
```rust
let (value, set_value) = signal("".to_string());
let validator = validation_builders::email_validator("email");
view! {
}
```
### **Custom Error Messages**
```rust
let (validation_error, set_validation_error) = signal(None::);
view! {
}
```
---
## ๐งช **Testing**
### **Running Tests**
```bash
# Run all validation tests
cargo test --package leptos-shadcn-input validation
# Run specific test categories
cargo test --package leptos-shadcn-input test_enhanced_input_validation_system
cargo test --package leptos-shadcn-input test_password_validation_system
cargo test --package leptos-shadcn-input test_validation_context_multiple_fields
```
### **Test Categories**
- **Basic Validation**: Required fields, email, length validation
- **Advanced Validation**: Pattern matching, custom validators
- **Multi-field Validation**: Context-based validation
- **Performance Testing**: Validation speed benchmarks
- **Accessibility Testing**: ARIA and keyboard navigation
---
## โฟ **Accessibility**
### **ARIA Support**
The validation system automatically provides:
- `aria-invalid="true"` for invalid fields
- `aria-describedby` linking to error messages
- `role="alert"` for error messages
- Proper focus management
### **Keyboard Navigation**
- **Tab**: Navigate between form fields
- **Enter**: Submit form (if valid)
- **Escape**: Clear validation errors
- **Arrow Keys**: Navigate within select/combobox fields
### **Screen Reader Support**
- Error messages are announced when validation fails
- Field descriptions are properly linked
- Validation state is communicated clearly
---
## ๐จ **Styling**
### **Error States**
```css
/* Automatic error styling */
.border-destructive {
border-color: hsl(var(--destructive));
}
.focus-visible:ring-destructive {
--tw-ring-color: hsl(var(--destructive));
}
```
### **Custom Error Styling**
```rust
view! {
}
```
---
## ๐ง **API Reference**
### **InputValidator**
```rust
pub struct InputValidator {
pub field_name: String,
pub rules: Vec,
pub custom_validators: Vec bool + Send + Sync>>,
}
impl InputValidator {
pub fn new(field_name: impl Into) -> Self;
pub fn required(self) -> Self;
pub fn min_length(self, length: usize) -> Self;
pub fn max_length(self, length: usize) -> Self;
pub fn email(self) -> Self;
pub fn pattern(self, pattern: impl Into) -> Self;
pub fn custom(self, validator: F) -> Self
where F: Fn(&str) -> bool + Send + Sync + 'static;
pub fn validate(&self, value: &str) -> ValidationResult;
}
```
### **ValidationResult**
```rust
pub struct ValidationResult {
pub is_valid: bool,
pub errors: Vec,
}
impl ValidationResult {
pub fn new() -> Self;
pub fn add_error(&mut self, field: impl Into, message: impl Into, rule: ValidationRule);
pub fn get_error(&self, field: &str) -> Option<&ValidationError>;
pub fn get_error_message(&self, field: &str) -> Option<&str>;
pub fn has_errors(&self) -> bool;
pub fn clear_errors(&mut self);
}
```
### **ValidationContext**
```rust
pub struct ValidationContext {
pub validators: HashMap ValidationResult + Send + Sync>>,
pub results: RwSignal>,
}
impl ValidationContext {
pub fn new() -> Self;
pub fn add_validator(&mut self, validator: InputValidator);
pub fn validate_field(&self, field_name: &str, value: &str) -> ValidationResult;
pub fn validate_all(&self, values: &HashMap) -> ValidationResult;
pub fn get_field_error(&self, field_name: &str) -> Option;
pub fn is_field_valid(&self, field_name: &str) -> bool;
pub fn is_form_valid(&self) -> bool;
}
```
---
## ๐ **Performance**
### **Optimization Features**
- **Fast Validation**: Optimized regex patterns and validation logic
- **Lazy Evaluation**: Validation only runs when needed
- **Memory Efficient**: Minimal memory allocation during validation
- **Batch Processing**: Multi-field validation in single pass
### **Performance Benchmarks**
- **Single Field Validation**: < 1ms average
- **Multi-field Validation**: < 5ms for 10 fields
- **Real-time Validation**: < 16ms (60fps compatible)
- **Memory Usage**: < 1MB for 1000 validations
---
## ๐ฎ **Future Enhancements**
### **Planned Features**
- **Async Validation**: Server-side validation support
- **Validation Groups**: Logical grouping of related fields
- **Conditional Validation**: Rules that depend on other fields
- **Internationalization**: Multi-language error messages
- **Validation Hooks**: Custom validation lifecycle events
### **Integration Plans**
- **Form Component**: Enhanced form validation integration
- **Dialog Component**: Modal form validation
- **Select Component**: Dropdown validation support
- **API Standards**: Standardized validation patterns
---
## ๐ **Examples**
### **Complete Form Example**
```rust
use leptos_shadcn_input::{Input, ValidationContext, validation_builders};
#[component]
pub fn UserRegistrationForm() -> impl IntoView {
let mut context = ValidationContext::new();
context.add_validator(validation_builders::email_validator("email"));
context.add_validator(validation_builders::password_validator("password"));
context.add_validator(validation_builders::username_validator("username"));
let (form_data, set_form_data) = signal(std::collections::HashMap::new());
let (show_validation, set_show_validation) = signal(false);
let handle_submit = move |_| {
set_show_validation.set(true);
let result = context.validate_all(&form_data.get());
if result.is_valid {
// Submit form
log::info!("Form is valid, submitting...");
}
};
view! {
}
}
```
---
## ๐ค **Contributing**
We welcome contributions to the validation system! Areas of interest:
- **New Validators**: Additional validation patterns
- **Performance**: Optimization improvements
- **Accessibility**: Enhanced ARIA support
- **Documentation**: Examples and guides
- **Testing**: Additional test scenarios
---
## ๐ **Support**
### **Getting Help**
- **GitHub Issues**: Bug reports and feature requests
- **GitHub Discussions**: Community support
- **Documentation**: Comprehensive guides
- **Examples**: Working code samples
---
**Built with โค๏ธ by the CloudShuttle team**
**Ready for production use with enterprise-grade validation capabilities!** ๐