MakeMyForm

Description

MakeMyForm is a simple and lightweight JavaScript library designed to generate HTML forms dynamically based on JSON input. It provides an easy way to create custom HTML forms using a JSON schema.

Dependencies

MakeMyForm relies on the following npm packages:

• Ajv: A JSON Schema validator for Node.js and browser. It is used for validating the JSON schema input provided by the user.

  

• Jsdom: A pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards. It is used for parsing and manipulating HTML documents in Node.js.

  

Installation

You can install MakeMyForm via npm:

npm install makemyform

Usage

Schema Format

The library expects a JSON schema following a specific format:

{
  "form": {
    "title": "string",
    "description": "string",
    "fields": [
      {
        "label": "string",
        "element": "string",
        "options": [
          {
            "name": "string",
            "label": "string",
            "value": "string"
          }
        ],
        "validation": {
          "required": "boolean",
          "regex": "string",
          "minLength": "number",
          "maxLength": "number",
          "minValue": "number",
          "maxValue": "number"
        },
        "attributes": {
          "attributeName": "value"
        }
      }
    ]
  }
}

Example Usage

const MakeMyForm = require("makemyform");

const jsonFormData = {
  form: {
    title: "Student Registration Form",
    description: "Form for registering students at the university",
    fields: [
      {
        label: "Enter your Email",
        element: "email",
        validation: {
          required: true,
        },
      },
      {
        label: "Enter your password",
        element: "password",
        validation: {
          minLength: 5,
          maxLength: 10,
          required: true,
        },
      },
    ],
  },
};

const htmlOutput = MakeMyForm.createForm(jsonFormData);

console.log(htmlOutput);

Output

<form>
  <h2>Student Registration Form</h2>
  <p>Form for registering students at the university</p>
  <div>
    <label>Enter your Email *</label>
    <input type="email" />
  </div>
  <div>
    <label>Enter your password *</label>
    <input type="password" minlength="5" maxlength="10" />
  </div>
  <button type="submit">Submit</button>
</form>

Repository

GitHub Repository

License

This project is licensed under the MIT License - see the LICENSE file for details.