extended-dynamic-forms
Version:
Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events
185 lines (181 loc) • 4.97 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizard Form - Vanilla JS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.24.0/dist/reset.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
padding: 20px;
max-width: 900px;
margin: 0 auto;
background: #f0f2f5;
}
.wizard-container {
background: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
min-height: 500px;
}
h1 {
text-align: center;
color: #1890ff;
}
</style>
</head>
<body>
<h1>Multi-Step Wizard Form</h1>
<div class="wizard-container">
<div id="wizard-form"></div>
</div>
<script src="../../dist/extended-dynamic-forms.standalone.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
// Define wizard steps
const steps = [
{
id: 'personal',
title: 'Personal Information',
schema: {
type: 'object',
properties: {
firstName: {
type: 'string',
title: 'First Name',
minLength: 2
},
lastName: {
type: 'string',
title: 'Last Name',
minLength: 2
},
dateOfBirth: {
type: 'string',
format: 'date',
title: 'Date of Birth'
}
},
required: ['firstName', 'lastName', 'dateOfBirth']
},
uiSchema: {
dateOfBirth: {
'ui:widget': 'date'
}
}
},
{
id: 'contact',
title: 'Contact Details',
schema: {
type: 'object',
properties: {
email: {
type: 'string',
format: 'email',
title: 'Email Address'
},
phone: {
type: 'string',
title: 'Phone Number',
pattern: '^[0-9-+()\\s]+$'
},
preferredContact: {
type: 'string',
title: 'Preferred Contact Method',
enum: ['email', 'phone', 'both'],
enumNames: ['Email', 'Phone', 'Both']
}
},
required: ['email', 'phone', 'preferredContact']
},
uiSchema: {
email: {
'ui:widget': 'email'
},
preferredContact: {
'ui:widget': 'radio'
}
}
},
{
id: 'address',
title: 'Address Information',
schema: {
type: 'object',
properties: {
street: {
type: 'string',
title: 'Street Address'
},
city: {
type: 'string',
title: 'City'
},
state: {
type: 'string',
title: 'State/Province'
},
postalCode: {
type: 'string',
title: 'Postal Code'
},
country: {
type: 'string',
title: 'Country',
enum: ['US', 'CA', 'UK', 'AU'],
enumNames: ['United States', 'Canada', 'United Kingdom', 'Australia']
}
},
required: ['street', 'city', 'country']
},
uiSchema: {
street: {
'ui:widget': 'textarea',
'ui:options': {
rows: 2
}
},
country: {
'ui:widget': 'select'
}
}
},
{
id: 'review',
title: 'Review & Submit',
schema: {
type: 'object',
properties: {
agreeToTerms: {
type: 'boolean',
title: 'I agree to the terms and conditions'
},
newsletter: {
type: 'boolean',
title: 'Subscribe to newsletter',
default: true
}
},
required: ['agreeToTerms']
}
}
];
// Create the wizard form
ExtendedDynamicForms.createWizardForm({
container: '#wizard-form',
steps: steps,
initialData: {},
onStepChange: function(step, formData) {
console.log('Step ' + step + ' data:', formData);
},
onComplete: function(formData) {
alert('Wizard completed!\n\nFinal data:\n' + JSON.stringify(formData, null, 2));
}
});
});
</script>
</body>
</html>