Build Bootstrap 4 Forms Based On JSON - bs-jsonform

File Size: 27.5 KB
Views Total: 6741
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Build Bootstrap 4 Forms Based On JSON - bs-jsonform

Just another dynamic form builder that lets you create Bootstrap 4 forms based on JSON you provide. Form validation is supported as well.

See Also:

How to use it:

1. Download and insert the JavaScript bs-jsonform.js into your Bootstrap page.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- Required JavaScript -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- bs-jsonform Plugin -->
<script src="bs-jsonform.js"></script>

2. Create a container to hold the Bootstrap form generated by the plugin.

<div id="myForm"></div>

3. Prepare your form data as follows:

  • fields: The array of objects containing the fields configuration
  • submit_button_text: The text to display on the submit button.
  • cancel_button_text: The text to display on the cancel button.
  • hide_validation: Whether or not to show the valid state on inputs.
  • button_orientation: Determine the button placement. 
  • form_controls_id: JsonForm automatically handles specifying and creating the IDs needed for Form generation. If you want to override the placement of the Form Controls, use this key.
  • fields.id: The ID for this field which will be used on the generated response payload
  • fields.name: Display name of the field that will be shown to the user
  • fields.type: The type of field. field: An input field, specify parameters in field key. html: Injects HTML, value: stores a value to return in response
  • fields.field: The configuration object for the Field type
  • fields.html: The HTML to inject
  • fields.value: The value to store only to return in the response
  • field.type: The type of input to use for this field
  • field.required: Whether or not this field is required
  • field.readonly: Whether or not this field is read only
  • field.options: All the options to display for an select/radio input
  • field.placeholder: The value to show in the placeholder
  • field.default_value: The value to prefill the field with
  • field.use_validate_callback: Whether or not to use specified validate_callback to validate the value on input
var formData = {
    hide_validation: false,
    button_orientation: "left",
    fields: [
        {
            id: "name",
            name: "What is your name?",
            type: "field",
            field: {
                type: "text",
                placeholder: "Name",
                default_value: "Bob Smith"
            }
        },
        {
            id: "color",
            name: "What is your favorite color?",
            type: "field",
            field: {
                type: "color",
                placeholder: "Color"
            }
        },
        {
            id: "canttouchthis",
            name: "You can't touch this",
            type: "field",
            field: {
                type: "text",
                readonly: true,
                placeholder: "I'm a placeholder"
            }
        },
        {
            id: "notcheckedanddisabled",
            name: "Can't check me",
            type: "field",
            field: {
                type: "checkbox",
                readonly: true,
            }
        },
        {
            id: "checked",
            name: "Uncheck me",
            type: "field",
            field: {
                type: "checkbox",
                default_value: "true",
            }
        },
        {
            id: "abcradio",
            name: "A, B, or C?",
            type: "field",
            field: {
                type: "radio",
                // default_value: "Option B",
                options: ["Option A", "Option B", "Option C"]
            }
        },
        {
            id: "switchon",
            name: "Switch that is on by default",
            type: "field",
            field: {
                type: "switch",
                default_value: "true",
            }
        },
        {
            id: "select",
            name: "Pick a direction",
            type: "field",
            field: {
                type: "select",
                default_value: "Top",
                options: ["Left", "Right", "Top", "Bottom"]
            }
        },
    ]
}

4. Populate the Bootstrap form with the JSON data.

// JsonForm.create(FormID, FormJSON, FormName)
window.jsonForm.create("#myForm", formData, "MyForm");

5. Fire an event when the form is submitted. The submit handler must be a function that accepts 2 arguments: formValid, formData. Check formValid (boolean) for the status of the form. If one or more fields fail validation, it will be false, otherwise it is true. formData is an object containing the field IDs and the values submitted.

window.jsonForm.registerSubmit(Form1Handler, "myForm")

function Form1Handler(valid, data) {
  if(valid) {
    // output data
    $("#output").text(JSON.stringify(data, null, 2))
  } else {
    $("#output").text("Form is NOT VALID. Did you fill out all fields?")
  }
}

This awesome jQuery plugin is developed by ambersnow. For more Advanced Usages, please check the demo page or visit the official website.