extended-dynamic-forms
Version:
Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events
142 lines (135 loc) • 3.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extended Dynamic Forms - Vanilla JS Example</title>
<!-- Ant Design CSS -->
<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, 'Helvetica Neue', Arial;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.form-container {
background: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.form-data {
margin-top: 20px;
padding: 16px;
background: #f5f5f5;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>Extended Dynamic Forms - Vanilla JS Example</h1>
<div class="form-container">
<h2>Basic Contact Form</h2>
<div id="form-root"></div>
</div>
<div class="form-data">
<h3>Form Data:</h3>
<div id="form-output">{}</div>
</div>
<!-- Load the standalone library -->
<script src="../../dist/extended-dynamic-forms.standalone.js"></script>
<script>
// Wait for the library to load
window.addEventListener('DOMContentLoaded', function() {
// Define the form schema
const schema = {
type: 'object',
properties: {
firstName: {
type: 'string',
title: 'First Name',
minLength: 2
},
lastName: {
type: 'string',
title: 'Last Name'
},
email: {
type: 'string',
format: 'email',
title: 'Email Address'
},
age: {
type: 'number',
title: 'Age',
minimum: 0,
maximum: 120
},
subscribe: {
type: 'boolean',
title: 'Subscribe to newsletter',
default: false
},
country: {
type: 'string',
title: 'Country',
enum: ['us', 'ca', 'uk', 'au'],
enumNames: ['United States', 'Canada', 'United Kingdom', 'Australia']
}
},
required: ['firstName', 'lastName', 'email']
};
// Define UI customizations
const uiSchema = {
firstName: {
'ui:placeholder': 'Enter your first name',
'ui:autofocus': true
},
email: {
'ui:widget': 'email',
'ui:placeholder': 'your.email@example.com'
},
age: {
'ui:widget': 'updown'
},
country: {
'ui:widget': 'select',
'ui:placeholder': 'Select a country'
}
};
// Create the form
const form = ExtendedDynamicForms.createForm({
container: '#form-root',
schema: schema,
uiSchema: uiSchema,
formData: {
subscribe: true
},
onChange: function(formData) {
// Update the output display
document.getElementById('form-output').textContent =
JSON.stringify(formData, null, 2);
},
onSubmit: function(formData) {
alert('Form submitted!\n\n' + JSON.stringify(formData, null, 2));
},
onError: function(errors) {
console.error('Form errors:', errors);
}
});
// Example: Update form data after 3 seconds
setTimeout(function() {
form.setFormData({
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@example.com',
subscribe: true
});
}, 3000);
});
</script>
</body>
</html>