{"id":16293533,"url":"https://github.com/badsyntax/handlebars-form-helpers","last_synced_at":"2025-03-16T13:31:35.298Z","repository":{"id":8431863,"uuid":"10020743","full_name":"badsyntax/handlebars-form-helpers","owner":"badsyntax","description":"Handlerbars.js form helpers","archived":false,"fork":false,"pushed_at":"2019-03-13T19:42:35.000Z","size":3359,"stargazers_count":54,"open_issues_count":4,"forks_count":20,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-07T20:09:24.097Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://badsyntax.github.io/handlebars-form-helpers/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/badsyntax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-12T22:47:52.000Z","updated_at":"2024-06-24T15:46:44.000Z","dependencies_parsed_at":"2022-08-25T02:40:32.481Z","dependency_job_id":null,"html_url":"https://github.com/badsyntax/handlebars-form-helpers","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fhandlebars-form-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fhandlebars-form-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fhandlebars-form-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Fhandlebars-form-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badsyntax","download_url":"https://codeload.github.com/badsyntax/handlebars-form-helpers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243817205,"owners_count":20352517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T20:11:40.072Z","updated_at":"2025-03-16T13:31:34.922Z","avatar_url":"https://github.com/badsyntax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# handlebars-form-helpers\n\n[![Build Status](https://travis-ci.org/badsyntax/handlebars-form-helpers.png?branch=master)](https://travis-ci.org/badsyntax/handlebars-form-helpers)\n\nA library of handlebars helpers that help with building forms.\n\n## Installation\n\n### Browser\n\n1. Either [download](https://raw.github.com/badsyntax/handlebars-form-helpers/master/dist/handlebars.form-helpers.min.js) the\nscript, or install with [bower](http://bower.io/): `bower install handlebars-form-helpers`\n2. Load the scripts into your page. (It does not matter which order the scripts are loaded in.)\n\n    ```html\n    \u003cscript src=\"handlebars.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"handlebars.form-helpers.js\"\u003e\u003c/script\u003e\n    ```\n\n3. Register the helpers:\n\n    ```javascript\n    HandlebarsFormHelpers.register(Handlebars);\n    ```\n\n### Node/CommonJS\n\n1. You can install the helpers with npm: `npm install handlebars-form-helpers`\n2. Load in the module and register it:\n\n    ```javascript\n    var hbs = require('hbs');\n    require('handlebars-form-helpers').register(hbs.handlebars);\n    ```\n\n### AMD\n\n1. Either [download](https://raw.github.com/badsyntax/handlebars-form-helpers/master/dist/handlebars.form-helpers.min.js) the\nscript, or install with [bower](http://bower.io/): `bower install handlebars-form-helpers`\n3. Load in the module and register it:\n\n  ```javascript\n  define(['handlebars', 'handlebars-form-helpers'], function(Handlebars, HandlebarsFormHelpers) {\n      HandlebarsFormHelpers.register(Handlebars);\n      // ..etc\n  });\n  ```\n\n## Usage\n\n### Registering the helpers\n\nYou have to register the helpers before you can use them in your templates. \nThe register method expects the Handlebars object to be passed in, and an *optional* config object, for example:\n\n```javascript\nHandlebarsFormHelpers.register(Handlebars, {\n  namespace: 'custom',\n  validationErrorClass: 'custom-validation-class'\n});\n```\n\nOnce the helpers are registered, you can use the helpers in your templates, and compile your templates as you usually\nwould. \n\n### Using the helpers\n\nMost of the helpers can be used inline, for example:\n\n```\n{{label \"name\" \"Please enter your name\"}}\n```\n\nThe only block helpers are the form, label and field_errors helpers:\n\n```\n{{#form \"/post\" class=\"form\"}} ... {{/form}}\n{{#label}}\n    A field label\n{{/label}}\n{{#field_errors \"surname\" errors}}\n    \u003cspan class=\"help-block\"\u003e{{this}}\u003c/span\u003e\n{{/field_errors}}`\n```\n\nBy default the helpers are registered without a namespace. This gives you short and friendly helper names. \n\nIf you need to change the helpers namespace, you can specify a custom namespace when registering the helpers, for example:\n\n```javascript\nHandlebarsFormHelpers.register(Handlebars, {\n  namespace: 'myform'\n})\n```\n\nNow the helpers are created with that namespace, for example:\n\n```\n{{myform-label \"name\" \"Please enter your name\"}}\n```\n\n\n### Common form helpers\n\n```\n{{#form url class=\"form\"}}{{/form}}\n{{label \"name\" \"Please enter your name\"}}\n{{input \"firstname\" person.name}}\n{{button \"save\" \"Submit form\"}}\n{{submit \"save\" \"Submit form\"}}\n{{select \"title\" titles person.title}}\n{{checkbox \"apples\" \"yes\" true}}\n{{file \"fileupload\"}}\n{{hidden \"secret\" \"key123\"}}\n{{password \"password\"}}\n{{textarea \"text\" \"Here is some text\"}}\n```\n\n#### Examples:\n\n**Form helper**\n```html\n{{#form \"/contact\" class=\"form\"}}{{/form}}\n```\n```html\n\u003cform method=\"POST\" action=\"/contact\" class=\"form\"\u003e\u003c/form\u003e\n```\n\n**Label helper**\n```html\n{{label \"name\" \"Please enter your name\"}}\n```\n```html\n\u003clabel for=\"name\"\u003ePlease enter your name\u003c/label\u003e\n```\n```html\n{{#label}}Please enter your name{{/label}}\n```\n```html\n\u003clabel\u003ePlease enter your name\u003c/label\u003e\n```\n\n**Input helper**\n```html\n{{input \"firstname\" \"Richard\"}}\n```\n```html\n\u003cinput type=\"text\" id=\"firstname\" name=\"firstname\" value=\"Richard\" /\u003e\n```\n\n**Button helper**\n```html\n{{button \"save\" \"Submit form\"}}\n```\n```html\n\u003cbutton name=\"save\" type=\"button\"\u003eSubmit form\u003c/button\u003e\n```\n\n**Submit button helper**\n```html\n{{submit \"save\" \"Submit form\"}}\n```\n```html\n\u003cbutton name=\"save\" type=\"submit\"\u003eSubmit form\u003c/button\u003e\n```\n\n**Select helper**\n```html\n{{select \"title\" titles title}}\n```\n```javascript\n{\n  titles: [{\n    value: 'mr',\n    text: 'Mr'\n  }],\n  title: 'mr'\n}\n```\n```html\n\u003cselect id=\"title\" name=\"title\"\u003e\u003coption value=\"mr\" selected=\"selected\"\u003eMr\u003c/option\u003e\u003c/select\u003e\n```\n\n**Select (multiple) helper**\n```html\n{{select \"title\" titles selected}}\n```\n```javascript\n{\n  titles: [{\n    value: 'mr',\n    text: 'Mr'\n  }],\n  selected: ['mr']\n}\n```\n```html\n\u003cselect id=\"title\" name=\"title\" multiple=\"true\"\u003e\u003coption value=\"mr\" selected=\"selected\"\u003eMr\u003c/option\u003e\u003c/select\u003e\n```\n\n**Checkbox helper**\n```html\n{{checkbox \"apples\" \"yes\" true}}\n```\n```html\n\u003cinput id=\"apples\" name=\"apples\" type=\"checkbox\" value=\"yes\" checked=\"true\" /\u003e\n```\n\n**File helper**\n```html\n{{file \"fileupload\"}}\n```\n```html\n\u003cinput name=\"fileupload\" id=\"fileupload\" type=\"file\" /\u003e\n```\n\n**Hidden helper**\n```html\n{{hidden \"secret\" \"key123\"}}\n```\n```html\n\u003cinput name=\"secret\" id=\"secret\" value=\"key123\" type=\"hidden\" /\u003e\n```\n\n**Password helper**\n```html\n{{password \"password\"}}\n```\n```html\n\u003cinput name=\"password\" id=\"password\" type=\"password\" /\u003e\n```\n\n**Textarea helper**\n```html\n{{textarea \"text\" \"Here is some text\"}}\n```\n```html\n\u003ctextarea name=\"text\" id=\"text\"\u003eHere is some text\u003c/textarea\u003e\n```\n\n\n### Form validation helpers\n\nValidation helpers work in a similar way to the common form helpers, but handle displaying of validation errors and \nfield error styling. \n\nThe validation helpers expect an 'errors' object to be passed in, which is used to display the \nvalidation errors for the field.\n\nFor example:\n\n```javascript\nvar data = {\n  errors: {\n    name: [\n      'Please enter a name'\n    ]\n  }\n};\nvar source = '{{input_validation \"name\" \"\" errors}}' +\n    '{{field_errors \"name\" errors class=\"help-block text-error\"}}';\nvar template = Handlebars.compile(source);\nvar html = template(data);\n\n// Compiled HTML will be:\n// \u003cinput name=\"name\" id=\"name\" type=\"text\" class=\"validation-error\" /\u003e\n// \u003cspan class=\"help-block text-error\"\u003ePlease enter a name\u003c/span\u003e');\n```\n\n### Validation helpers\n\n```\n{{input_validation \"firstname\" person.name errors}}\n{{label_validation \"name\" \"Please enter your name\" errors}}\n{{select_validation \"title\" titles person.title errors}}\n{{checkbox_validation \"food[]\" \"apples\" true errors}}\n{{file_validation \"fileupload\" errors}}\n{{password_validation \"password\" \"dontdothis\" errors}}\n{{textarea_validation \"text\" \"Here is some text\" errors}}\n```\n\n### Error data\n\nThe errors object has to be in the following format:\n\n```javascript\nvar errors = {\n  fieldName: [\n    'Error message 1',\n    'Error message 2!'\n  ]\n};\n```\n\n#### Examples:\n\n**Input validation helper**\n```html\n{{input_validation \"name\" \"\" errors}}\n```\n```html\n\u003cinput name=\"name\" id=\"name\" type=\"text\" class=\"validation-error\" /\u003e\n```\n\n**Label validation helper**\n```html\n{{label_validation \"name\" \"\" errors}}\n```\n```html\n\u003clabel for=\"name\" class=\"validation-error\"\u003eEnter your name\u003c/label\u003e\n```\n\n**Select validation helper**\n```html\n{{select_validation \"title\" titles \"\" errors}}\n```\n```html\n\u003cselect id=\"title\" name=\"title\" class=\"validation-error\"\u003e\u003coption value=\"mr\"\u003eMr\u003c/option\u003e\u003c/select\u003e\n```\n\n**Checkbox validation helper**\n```html\n{{checkbox_validation \"title\" 1 false errors}}\n```\n```html\n\u003cinput name=\"title\" type=\"checkbox\" value=\"1\" id=\"title\" class=\"validation-error\" /\u003e\n```\n\n**File validation helper**\n```html\n{{file_validation \"fileupload\" errors}}\n```\n```html\n\u003cinput name=\"fileupload\" id=\"fileupload\" type=\"file\" class=\"validation-error\" /\u003e\n```\n\n**Password validation helper**\n```html\n{{password_validation \"password\" \"\" errors}}\n```\n```html\n\u003cinput name=\"password\" id=\"password\" type=\"password\" class=\"validation-error\" /\u003e\n```\n\n**Textarea validation helper**\n```html\n{{textarea_validation \"text\" \"Here is some text\" errors}}\n```\n```html\n\u003ctextarea name=\"text\" id=\"text\" class=\"validation-error\"\u003eHere is some text\u003c/textarea\u003e\n```\n\n**Field errors helpers**\n\n**Inline**\n```\n{{field_errors \"text\" errors class=\"error\"}}\n```\n```html\n\u003cdiv class=\"error\"\u003ePlease enter some text\u003c/div\u003e\n```\n**Block**\n```\n{{#field_errors \"text\" errors}}\n\u003cspan class=\"help-block\"\u003e{{this}}\u003c/span\u003e\n{{/field_errors}}\n```\n```html\n\u003cspan class=\"help-block\"\u003eError message 1\u003c/span\u003e\n\u003cspan class=\"help-block\"\u003eError message 2\u003c/span\u003e\n```\n\n## Demo\n\nThis demo shows how to use the helpers to build a form that handles validation: \nhttp://badsyntax.github.io/handlebars-form-helpers/\n\n## Contributing\n\nFeel free to send pull requests. \n\n### Running the tests\n\nThis project uses [jasmine](http://pivotal.github.io/jasmine/) for testing. If you want to run the tests, you'll need to have \n[nodejs](http://nodejs.org/), [grunt-cli](https://github.com/gruntjs/grunt-cli) and [bower](http://bower.io/) installed.\nYou'll also need to install the project dependencies by \nrunning `npm install \u0026\u0026 bower install` in the project root.\n\nOnce everything is installed, you can run the tests by either running `npm test` or `grunt test`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Fhandlebars-form-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadsyntax%2Fhandlebars-form-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Fhandlebars-form-helpers/lists"}