https://github.com/jansmolders86/knockout-dynamic-forms

Knockout Dynamic Forms with Validation
https://github.com/jansmolders86/knockout-dynamic-forms

Last synced: 30 days ago
JSON representation

Knockout Dynamic Forms with Validation

• Host: GitHub
• URL: https://github.com/jansmolders86/knockout-dynamic-forms
• Owner: jansmolders86
• Created: 2014-01-06T08:51:51.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2018-07-25T19:07:26.000Z (over 6 years ago)
• Last Synced: 2024-04-14T14:44:02.340Z (7 months ago)
• Language: JavaScript
• Size: 41 KB
• Stars: 12
• Watchers: 6
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Knockout Dynamic Forms with Validation

Validation uses: https://github.com/Knockout-Contrib/Knockout-Validation.

## Features

* Made with plain JavaScript and KnockoutJS

* Dirty checking of fields

* Form and field validation 

* JSON markup of field data

With this code you can generate a form dynamically based on a JSON file.

JSON file markup (if a field is not required, just leave as an empty string or array):

        { "formElements": [

            {

                "Name"              : "Gender",                         // String: Name of field

                "Element"           : "input",                          // String: Element (Can be: input, textarea, button, select)

                "Type"              : "radio",                          // String: Type (Can be: text, radio, checkbox, hidden, password, submit)

                "Options"           : ["Male", "Female", "Unkown"],     // Array: Options (Used by select, radio, checkbox)

                "Placeholder"       : "",                               // String: A placeholder text

                "Value"             : "",                               // String/Integer: Default value or [] for array. ex : "Value" : []

                "HideField"         : {                                 // Set if a field needs to be hidden if the value of the current element

                                                                        // meets a certain condition

                    "HideElement"   : "",                               // String: The element (by name)  that needs to be hidden

                    "HideCondition" : ""                                // String/REGEX: The condition the value of the current element has to match

                },

                "Validation"        : {                                 // Form validation using kockout/validation. All options of KO/validation can be used.

                    "required"  : "This field is required",             // String/Boolean: Can be true/false or a string with the validation message

                    "minLength" : 1,                                    // Validation example

                    "maxLength" : 100,                                  // Validation example

                    "pattern"   : "^[A-Z0-9].$"                         // Validation REGEX example

                }

            }

        } 

 

Knockout will handle the rest. Check out the code:

* Index.html                    The view 

* knockout-functions.js         Sets up the model and the validation 

        

The HTML generated uses YAML classes (http://www.yaml.de/) but of course you can alter them and use your own.

Two stubs are included for testing purposes.

Feel free to improve or use. 

(ps, run on a webserver, locally does not work of course)