| Attribute | Description | Example |
|-----------|-------------|---------|
| data-form="next-btn" | Next button | |
| data-form="back-btn" | Back button | |
| data-form="submit" | Submit button | |
| data-skip="step-id" | Skip to specific step | |

$3

| Attribute | Description | Example |
|-----------|-------------|---------|
| data-go-to="step-id" | Defines branch target | |

$3

| Attribute | Description | Example |
|-----------|-------------|---------|
| data-step-field-name="name" | Field identifier for state management | |
| data-error-message="text" | Custom error message | |

$3

| Attribute | Description | Example |
|-----------|-------------|---------|
| data-summary-field="field1\|field2" | Fields to display (pipe-separated) |

|
| data-join="type" | How to join multiple values |

|
| data-summary-type="type" | Summary categorization |

|

#### Join Types

- space - Join with spaces: "John Doe"
- comma - Join with commas: "John, Doe"
- dash - Join with dashes: "John - Doe"
- pipe - Join with pipes: "John | Doe"
- newline - Join with line breaks

API Reference

$3

`javascript
// Initialize library
FormLib.init(rootElement?)

// Check initialization status
FormLib.isInitialized()

// Get current state
FormLib.getState()

// Log current state to console
FormLib.logCurrentState()

// Validate entire form
FormLib.validateForm()

// Reset form to initial state
FormLib.resetForm()

// Get form data
FormLib.getFormData()

// Set form data
FormLib.setFormData(data)

// Destroy library
FormLib.destroy()
`

$3

`javascript
// Import individual modules for advanced usage
import {
FormState,
initBranching,
initMultiStep,
initValidation,
initErrors,
initSummary
} from 'form-functionality-library';

// FormState management
FormState.setField('fieldName', 'value');
FormState.getField('fieldName');
FormState.getAll();
FormState.clear();

// Validation
validateField('fieldName');
validateStep('stepId');
validateAllVisibleFields();

// Errors
showError('fieldName', 'Error message');
clearError('fieldName');
clearAllErrors();

// Summary
updateSummary();
clearSummary();
`

Examples

$3

`html



Step 1

Step 2

Back
Next
Submit

`

$3

`html


`html



`bash


Install dependencies (if using npm)

`
/
├── config.ts # Configuration constants
├── index.ts # Main entry point
├── tsconfig.json # TypeScript configuration
├── /modules/
│ ├── utils.ts # Shared utilities
│ ├── formState.ts # State management
│ ├── branching.ts # Branching logic
│ ├── multiStep.ts # Multi-step navigation
│ ├── validation.ts # Form validation
│ ├── errors.ts # Error handling
│ └── summary.ts # Summary generation
├── index.html # Test/demo page
└── README.md
`

Debugging

The library provides verbose console logging when DEBUG is enabled (default):

`javascript
// Enable/disable debug logging
DEFAULTS.DEBUG = true; // or false

// Log current state
FormLib.logCurrentState();

// Get detailed state information
const state = FormLib.getState();
console.log(state);
`

License

MIT License - feel free to use in commercial and personal projects.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions:
- Check the console for detailed logging
- Use FormLib.logCurrentState()` to debug
- Review the data attributes in your HTML
- Ensure proper TypeScript compilation