{"id":15713721,"url":"https://github.com/henrikac/kemal-form","last_synced_at":"2025-05-12T22:55:03.907Z","repository":{"id":140270864,"uuid":"416007623","full_name":"henrikac/kemal-form","owner":"henrikac","description":"A shard that makes it easy and fun to work with forms in your Kemal applications.","archived":false,"fork":false,"pushed_at":"2021-10-29T07:52:06.000Z","size":78,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T22:54:57.535Z","etag":null,"topics":["crystal","crystal-lang","crystal-language","kemal"],"latest_commit_sha":null,"homepage":"","language":"Crystal","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/henrikac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-11T16:35:51.000Z","updated_at":"2023-03-10T12:10:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f172589-f3b2-4ddd-ae76-47ce3f9e2061","html_url":"https://github.com/henrikac/kemal-form","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrikac%2Fkemal-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrikac%2Fkemal-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrikac%2Fkemal-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrikac%2Fkemal-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henrikac","download_url":"https://codeload.github.com/henrikac/kemal-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253837400,"owners_count":21971982,"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":["crystal","crystal-lang","crystal-language","kemal"],"created_at":"2024-10-03T21:33:05.659Z","updated_at":"2025-05-12T22:55:03.884Z","avatar_url":"https://github.com/henrikac.png","language":"Crystal","funding_links":[],"categories":[],"sub_categories":[],"readme":"# kemal-form\n\nkemal-form is a shard that makes it easy and fun to work with forms in your [Kemal](https://kemalcr.com/) applications.\n\n## Installation\n\n1. Add the dependency to your `shard.yml`:\n\n   ```yaml\n   dependencies:\n     kemal-form:\n       github: henrikac/kemal-form\n   ```\n\n2. Run `shards install`\n\n## Usage\n\n**src/main.cr**\n```crystal\nrequire \"kemal\"\nrequire \"kemal-form\"\n\nclass LoginForm \u003c Kemal::Form\n  field username : Kemal::Form::TextField,\n                     validators: [Kemal::FormValidator::Required.new]\n  field password : Kemal::Form::PasswordField,\n                     validators: [Kemal::FormValidator::Required.new]\n  button submit : Kemal::Form::SubmitButton,\n                    text: \"Login\"\nend\n\nget \"/login\" do\n  form = LoginForm.new\n  render \"src/views/login.ecr\"\nend\n\npost \"/login\" do |env|\n  form = LoginForm.new\n  if form.valid?\n    username = form.body[\"username\"].as(String)\n    password = form.body[\"password\"].as(String)\n    env.redirect \"/\"\n    next\n  end\n  render \"src/views/login.ecr\"\nend\n```\n\n**src/views/login.ecr**\n```erb\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eLogin\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eLogin\u003c/h1\u003e\n    \u003c% if !form.errors.empty? %\u003e\n      \u003cul\u003e\n        \u003c% form.errors.each do |error| %\u003e\n          \u003cli\u003e\u003c%= error %\u003e\u003c/li\u003e\n        \u003c% end %\u003e\n      \u003c/ul\u003e\n    \u003c% end %\u003e\n    \u003cform method=\"POST\"\u003e\n      \u003c% form.fields.each do |field| %\u003e\n        \u003cdiv\u003e\n          \u003c%= field.label %\u003e\n          \u003c%= field %\u003e\n          \u003c% if !field.errors.empty? %\u003e\n            \u003cul\u003e\n              \u003c% field.errors.each do |error| %\u003e\n                \u003cli\u003e\u003c%= error %\u003e\u003c/li\u003e\n              \u003c% end %\u003e\n            \u003c/ul\u003e\n          \u003c% end %\u003e\n        \u003c/div\u003e\n      \u003c% end %\u003e\n      \u003c% form.buttons.each do |button| %\u003e\n        \u003c%= button %\u003e\n      \u003c% end %\u003e\n    \u003c/form\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis will output\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eLogin\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eLogin\u003c/h1\u003e\n    \u003cform method=\"POST\"\u003e\n      \u003cdiv\u003e\n        \u003clabel for=\"username\"\u003eUsername\u003c/label\u003e\n        \u003cinput type=\"text\" id=\"username\" name=\"username\" required/\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003clabel for=\"password\"\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" id=\"password\" name=\"password\" required/\u003e\n      \u003c/div\u003e\n      \u003cbutton type=\"submit\"\u003eLogin\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe field macro used to generate form fields takes a few optional arguments/options:\n+ id: The value of the fields id attribute.\n+ name: The value of the fields name attribute.\n+ attrs: A hash of extra field attributes.\n+ value: The value of the fields value attribute.\n+ required: A boolean to signal if the required attribute should be set.\n+ validators: An array of field validators.\n+ label: The fields label (`Kemal::Form::Label(for, text, attrs)`).\n\n*Note:* The required attribute is only for client-side validation and it will not be checked when `Kemal::Form#valid?` is run.\n\n#### Fields\n\nkemal-form comes with a few built-in fields:\n+ `EmailField`\n+ `HiddenField`\n+ `NumberField`\n+ `PasswordField`\n+ `TextField`\n+ `TextAreaField`\n+ `CheckboxField`\n+ `RadioField`\n+ `SelectField`\n\nCustom fields are easy to create if the built-in fields are not sufficient enough.\n\n```crystal\nclass CustomField \u003c Kemal::Form::Field\n  # code ...\n\n  def to_s(io : IO)\n    # how this field should be rendered\n  end\nend\n```\n\n#### Buttons\n\nkemal-form comes with a single button `Kemal::Form::SubmitButton`. However, custom buttons can be created by inheriting from `Kemal::Form::Button`.\n\n#### Field validators\n\nkemal-form comes with a few field validators that helps making sure that the form data is valid.\n\n| Validator | Description |\n| --- | --- |\n| `Required` | Validates that the field is not empty. Adding this validator to a field will also add the `required` attribute to the field if it has not already been set. |\n| `Length` | Validates that the field has a `min` length, `max` length or has a length between `min` and `max` |\n| `NumberRange` | Validates that a number has a `min` value, `max` value or has a value between `min` and `max`. Adding this validator will also add the `min` and/or `max` attribute to the field. |\n| `Email` | Validates that the field is a valid email |\n\n#### Custom field validators\n\nIt is easy to create custom field validators if there is a situation where the built-in validators are not sufficient.\n\n```crystal\nrequire \"kemal-form\"\n\nclass CustomValidator \u003c Kemal::FormValidator::Validator\n  def validate(field : Kemal::Form::FormField)\n    # code ...\n    #\n    # to signal that validation failed\n    # raise Kemal::Form::ValidationError\n  end\nend\n```\n\n#### Errors\n\nA situation might happen where you want to add an error to either a specific field or to the form after you have validated the form with `Form#valid?`. To add and error to a specific field use `Field#add_error` and `Form#add_form` to add a form error.  \n\nA field error could be something like `\"Username already exist\"` and a form error could be something like `\"Invalid username or password\"` where you don't want to couple the error to a specific field.\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/henrikac/kemal-form/fork\u003e)\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## Contributors\n\n- [Henrik Christensen](https://github.com/henrikac) - creator and maintainer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrikac%2Fkemal-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenrikac%2Fkemal-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrikac%2Fkemal-form/lists"}