{"id":28036112,"url":"https://github.com/fandresh7/handle-forms","last_synced_at":"2026-04-29T19:33:03.034Z","repository":{"id":161761973,"uuid":"635892340","full_name":"fandresh7/handle-forms","owner":"fandresh7","description":"Handle Forms is a JavaScript library designed to simplify the process of handling forms.","archived":false,"fork":false,"pushed_at":"2023-05-08T21:09:19.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T03:03:07.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/handle-forms","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fandresh7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-05-03T17:19:16.000Z","updated_at":"2023-05-08T21:18:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ea3d98e-eca0-4dec-a681-3f43adaf42f0","html_url":"https://github.com/fandresh7/handle-forms","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"1a8351d5e07fd8b356fa19adda1506fd9abae510"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fandresh7/handle-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fandresh7%2Fhandle-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fandresh7%2Fhandle-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fandresh7%2Fhandle-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fandresh7%2Fhandle-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fandresh7","download_url":"https://codeload.github.com/fandresh7/handle-forms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fandresh7%2Fhandle-forms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32441081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-05-11T12:05:31.753Z","updated_at":"2026-04-29T19:33:03.009Z","avatar_url":"https://github.com/fandresh7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Handle Forms\n\nHandle Forms is a JavaScript library designed to simplify the process of handling forms. With this library, you can easily show or hide questions based on the answer of preview questions and validate each form field.\n\n## Question Structure\n\nThe structure of a question in Handle Forms is defined by the following TypeScript interface:\n\n```ts\nexport interface Question {\n  label?: string\n  name: string\n  type: InputType\n  placeholder?: string\n  multiple?: boolean\n  options?: InputOption[]\n  inside?: string\n  validations: {\n    required: boolean\n    pattern?: RegExp\n    min?: number\n    max?: number\n    min_length?: number\n    accept?: string[]\n  }\n  show?: {\n    name: string\n    values: string[]\n    checked?: boolean\n    check: 'some' | 'every'\n  }\n}\n```\n\n## Properties\n\n- `label`: (optional): A string that represents the label of the question.\n- `name`: A string that represents the name of the question.\n- `type`: The supported types are text, email, password, number, textarea, radio, file and checkbox.\n- `placeholder` (optional): A string that represents the placeholder of the question.\n- `multiple` (optional): A boolean that indicates whether the question is a multiple-choice question or not.\n- `options` (optional): An array of InputOption objects that represent the options of a multiple-choice question.\n- `inside` (optional): A string that represents the name of the question that the current question is inside of. This is used to group questions together.\n- `validations`: An object that represents the validations of the question. It has the following properties:\n  - `required`: A boolean that indicates whether the question is required or not.\n  - `pattern` (optional): A regular expression that represents the pattern that the question's value should match.\n  - `min` (optional): A number that represents the minimum value that the question's value can be.\n  - `max` (optional): A number that represents the maximum value that the question's value can be.\n  - `min_length` (optional): A number that represents the minimum length that the question's value can be.\n  - `accept` (optional): An array of strings that represent the types of files that the question can accept. This is only applicable to file input questions.\n- `show` (optional): An object that indicates whether the question should be shown or hidden based on the answer of another question. It has the following properties:\n  - `name`: A string that represents the name of the question that the current question is dependent on.\n  - `values`: An array of strings that represent the values of the dependent question that should cause the current question to be shown.\n  - `checked` (optional): A boolean that indicates whether the dependent question should be checked or unchecked to show the current question. If this is not provided, the current question will be shown if the dependent question is checked.\n  - `check`: An enumerated value of type 'some' | 'every' that indicates whether the current question should be shown if some or every value of the dependent question matches the values array.\n\n## Render Form Questions\n\nEach question is wrapped by a `div` element with the class `div-wrapper`.\n\n```html\n\u003cdiv class=\"div-wrapper\"\u003e\n  \u003clabel for=\"name\"\u003eName\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"name\" id=\"name\" /\u003e\n\u003c/div\u003e\n```\n\nThe question structure is defined as a JavaScript object:\n\n```js\n{\n  label: 'Name',\n  name: 'name',\n  type: 'text',\n  validations: {\n    required: true\n  }\n}\n```\n\nIf there are nested questions, the HTML structure would look like this:\n\n```html\n\u003cdiv class=\"div-wrapper\"\u003e\n  \u003clabel for=\"gender\"\u003eGender\u003c/label\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"radio\" name=\"gender\" value=\"gender_other\" id=\"gender_other\" /\u003e\n    \u003clabel for=\"gender_other\"\u003eOther\u003c/label\u003e\n    \u003c!-- Nested question --\u003e\n    \u003cdiv class=\"div-wrapper\"\u003e\n      \u003cinput type=\"text\" name=\"other_gender\" id=\"other_gender\" placeholder=\"Enter other options here\" /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"radio\" name=\"gender\" value=\"male\" id=\"male\" /\u003e\n    \u003clabel for=\"male\"\u003eOther\u003c/label\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"radio\" name=\"gender\" value=\"female\" id=\"female\" /\u003e\n    \u003clabel for=\"female\"\u003eOther\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe question structure is defined as an array of JavaScript objects:\n\n```js\n{\n  label: 'Gender',\n  name: 'gender',\n  type: 'radio',\n  options: [\n    { label: 'Male', value: 'male' },\n    { label: 'Female', value: 'female' },\n    { label: 'Other', value: 'gender_other', inside: 'other_gender' },\n  ],\n  validations: {\n    required: true\n  }\n},\n{\n  name: 'other_gender',\n  type: 'text',\n  placeholder: 'Enter other options here',\n  show: {\n    name: 'gender',\n    values: ['gender_other'],\n    check: 'every'\n  },\n  validations: {\n    required: true\n  }\n},\n```\n\nAfter define the questions array, you can render them using `renderForm` function:\n\n```js\nconst form = document.querySelector('#form')\nrenderForm(form, questions)\n```\n\nTo check for show/hide questions, you can use `handleChanges` function:\n\n```js\nform.addEventListener('change', (event) =\u003e {\n  handleChanges(event, questions, form)\n})\n```\n\nTo validate and get error messages for each question, you can use `validateForm` and `getValidationMessages` functions:\n\n```js\nform.addEventListener('submit', (event) =\u003e {\n  event.preventDefault()\n  const validations = validateForm(form, questions)\n  const messages = getValidationMessages(form, validations)\n})\n```\n\nif you are using a CDN, you must include `handleForm` before each function:\n\n```js\nconst form = document.querySelector('#form')\nhandleForms.renderForm(form, questions)\n\nform.addEventListener('change', (event) =\u003e {\n  handleForms.handleChanges(event, questions, form)\n})\n\nform.addEventListener('submit', (event) =\u003e {\n  event.preventDefault()\n  const validations = handleForms.validateForm(form, questions)\n  const messages = handleForms.getValidationMessages(form, validations)\n})\n```\n\nYou can find a complete example in: https://t.ly/CxIvT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffandresh7%2Fhandle-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffandresh7%2Fhandle-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffandresh7%2Fhandle-forms/lists"}