Task Description:
You are required to create a registration form using HTML, JavaScript/jQuery, and the provided JSON data. The JSON data includes all the necessary details for the form, such as fields, buttons, and their respective attributes.
JSON Data:
{
"form": {
"id": "registrationForm",
"class": "form",
"fields": [
{
"label": "First Name",
"id": "firstName",
"class": "form-control",
"type": "text",
"placeholder": "Enter your first name",
"required": true
},
{
"label": "Last Name",
"id": "lastName",
"class": "form-control",
"type": "text",
"placeholder": "Enter your last name",
"required": true
},
{
"label": "Email",
"id": "email",
"class": "form-control",
"type": "email",
"placeholder": "Enter your email",
"required": true
},
{
"label": "Password",
"id": "password",
"class": "form-control",
"type": "password",
"placeholder": "Enter your password",
"required": true
},
{
"label": "Confirm Password",
"id": "confirmPassword",
"class": "form-control",
"type": "password",
"placeholder": "Confirm your password",
"required": true
}
],
"buttons": [
{
"label": "Submit",
"id": "submitButton",
"class": "btn btn-primary",
"type": "submit"
},
{
"label": "Reset",
"id": "resetButton",
"class": "btn btn-secondary",
"type": "reset"
}
]
}
}
Requirements:
- Use the provided JSON data to dynamically generate the form fields and buttons.
- The form should include all the fields and buttons specified in the JSON data, with the corresponding attributes (e.g.,
id,class,placeholder,required). - Use jQuery to manipulate the DOM and render the form.
- Apply basic styling to the form to make it visually appealing (Optional).
- The form does not need to submit data to a server, but it should perform basic client-side validation (e.g., required fields should not be empty).
Submission:
Please provide the source code for your solution, along with any instructions necessary to run your application.