{"id":27942554,"url":"https://github.com/djadriano/vform","last_synced_at":"2025-07-01T11:32:42.269Z","repository":{"id":33118608,"uuid":"132687400","full_name":"djadriano/vform","owner":"djadriano","description":"A dependency-free vanilla Javascript form validation using Constraint Validation API","archived":false,"fork":false,"pushed_at":"2022-12-10T17:28:30.000Z","size":3847,"stargazers_count":7,"open_issues_count":19,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-03T00:23:38.624Z","etag":null,"topics":["constraint-validation","form","form-validation","html5","javascript","js","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@djadrianof/vform","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/djadriano.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}},"created_at":"2018-05-09T01:55:39.000Z","updated_at":"2024-01-16T21:44:22.000Z","dependencies_parsed_at":"2023-01-14T23:30:52.882Z","dependency_job_id":null,"html_url":"https://github.com/djadriano/vform","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/djadriano/vform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djadriano%2Fvform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djadriano%2Fvform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djadriano%2Fvform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djadriano%2Fvform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djadriano","download_url":"https://codeload.github.com/djadriano/vform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djadriano%2Fvform/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260355369,"owners_count":22996463,"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":["constraint-validation","form","form-validation","html5","javascript","js","vanilla-javascript","vanilla-js"],"created_at":"2025-05-07T11:57:04.141Z","updated_at":"2025-07-01T11:32:42.215Z","avatar_url":"https://github.com/djadriano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![alt text](https://raw.githubusercontent.com/djadriano/vform/master/src/vform-logo.png \"VForm - Vanilla JS Form Validation\")\n\n# VForm\n\nA dependency-free vanilla Javascript form validation using Constraint Validation API.\nJust use HTML5 form fields based in validation attributes and that's it, the library resolve all!\n\nSee more about HTML validation attributes in:\n[MDN - Constraint validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)\n\n# Install\n\nNPM:\n\n```sh\nnpm i @djadrianof/vform\n```\n\nYarn:\n\n```sh\nyarn add @djadrianof/vform\n```\n\n# Setup\n\nImport the library in your code:\n\n```javascript\nimport VForm from \"@djadrianof/vform\";\n```\n\nOr get the script directly from unpkg.com\n\n```html\n\u003cscript src=\"https://unpkg.com/@djadrianof/vform\"\u003e\u003c/script\u003e\n```\n\n# Usage\n\nFirst initialize the library:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", event =\u003e {\n  const Validation = new VForm(\".form\", {\n    classes: {\n      errorElement: \"field-error\"\n    },\n    events: {\n      onInitializedSuccess: onInitializedSuccessForm,\n      onInitializedError: onInitializedError,\n      onValid: onValid,\n      onBlurFieldChecked: onBlurFieldChecked,\n      onChangeFieldChecked: onChangeFieldChecked,\n      onSubmit: onSubmit\n    }\n  });\n});\n```\n\n# Live Examples\n\n* [Example 01 - Initialize library and basic usage](https://codepen.io/djadriano/pen/ejEZgP)\n* [Example 02 - Checkbox and Radio Button](https://codepen.io/djadriano/full/ejVQBV)\n* [Example 03 - Validate with Regex Pattern Attribute](https://codepen.io/djadriano/full/pZaQZa)\n\n# Set your form element\n\nObs: Set the attribute noValidate in your form to prevent default browser validation.\n\n```html\n  \u003cform class=\"form\" noValidate\u003e\n    \u003clabel data-field-container=\"name\"\u003e\n      \u003cinput\n        type=\"email\"\n        name=\"name\"\n        required\n        class=\"foo\"\n        minlength=\"4\"\n        data-empty-message=\"Empty message\"\n        data-error-message=\"Error message\"\n        data-length-message=\"Length message\"\n      /\u003e\n      \u003cspan class=\"field-error\"\u003e\u003c/span\u003e\n    \u003c/label\u003e\n  \u003c/form\u003e\n```\n\n# Options\n\nIs possible set some options like css classes and events:\n\n# Classes\n\nClasses are helpful for indicate the state of field or form.\n\n```javascript\nconst Validation = new VForm(\".form\", {\n  classes: {\n    valid: \"field-valid\",\n    invalid: \"field-invalid\",\n    formValid: \"form-valid\",\n    errorElement: \"error-element\"\n  }\n});\n```\n\n| Name         | Description                                                               |\n| ------------ | ------------------------------------------------------------------------- |\n| valid        | class that will be set in field after be validated                        |\n| invalid      | class that will be set in field after check the status and return invalid |\n| formValid    | class that will be set in form when is valid                              |\n| errorElement | class of element that is render the error message                         |\n\n# Events\n\nEvents are helpful to get the status of form and fields.\n\n```javascript\nconst Validation = new VForm(\".form\", {\n  events: {\n    onInitializedSuccess: onInitializedSuccessForm,\n    onInitializedError: onInitializedError,\n    onSubmit: onSubmit,\n    onReset: onReset,\n    onValid: onValid,\n    onFocus: onFocus,\n    onBlurFieldChecked: onBlurFieldChecked,\n    onChangeFieldChecked: onChangeFieldChecked,\n    execBeforeSubmit: execBeforeSubmit\n  }\n});\n```\n\n| Name                 | Description                                                                                                                     |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| onInitializedSuccess | Event is called if library is initialized with success. This method return the form DOM element                                 |\n| onInitializedError   | Event is called if library is not initialized                                                                                   |\n| onSubmit             | Event is called when the form is submited. If form is valid, the method return a promise with a object that contains the fields |\n| onReset              | Event is called when the form is reseted                                                                                        |\n| onValid              | Event is called when the form stay valid                                                                                        |\n| onFocus              | Event is called when the field is invalid. The method return the field element                                                  |\n| onBlurFieldChecked   | Event is called when the blur is executed and the field is valid. The method return the field element                           |\n| onChangeFieldChecked | Event is called after the field element stay valid and in onChange listener. The method return the field element                |\n| execBeforeSubmit     | Is executed before the submit of form. This method should return a promise                                                      |\n\n# Data Attributes\n\nData attributes helps you to control and customize the validation.\n\n```html\n\u003clabel data-field-container=\"name\"\u003e\n    \u003cinput\n        type=\"email\"\n        name=\"name\"\n        required\n        class=\"foo\"\n        minlength=\"4\"\n        data-empty-message=\"Empty message\"\n        data-error-message=\"Error message\"\n        data-length-message=\"Length message\"\n    /\u003e\n    \u003cspan class=\"field-error\"\u003e\u003c/span\u003e\n\u003c/label\u003e\n```\n\nWith a reference error element\n\n```html\n\u003clabel data-field-container=\"age\"\u003e\n    \u003cinput\n        type=\"text\"\n        name=\"age\"\n        required\n        class=\"foo\"\n        minlength=\"4\"\n        data-empty-message=\"Empty message\"\n        data-error-message=\"Error message\"\n        data-length-message=\"Length message\"\n    /\u003e\n    \u003cspan class=\"field-error\" data-reference-error=\"age\"\u003e\u003c/span\u003e\n\u003c/label\u003e\n```\n\n| Name                 | Description                                                                                                         |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| data-field-container | This data indicate a container for field. The value should be the same value of name attribute of field element.    |\n| data-error-message   | Message for indicate that field contains error                                                                      |\n| data-empty-message   | Message for indicate that field is empty                                                                            |\n| data-length-message  | Message for indicate that field needs contain a minimum size of characteres based on minlength attribute            |\n| data-reference-error | This data indicate a different error element to show a error (use the same name of element that you need reference) |\n\n# Methods\n\nAre some helpful methods that you can access directly via library instance.\n\n| Name            | Description                                                                                                                                                                |\n| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| update          | Is helpful if needs insert a new field dynamically in form or needs remove some field of form. This method will register the listeners and set validations for new fields. |\n| getFieldsValues | Return a promise that contain a object with fields values                                                                                                                  |\n| setValidField   | Indicate that a field is valid                                                                                                                                             |\n| setInValidField | Indicate that a field is not valid                                                                                                                                         |\n| setErrorMessage | Set a error message dynamically for a field                                                                                                                                |\n\n# Browser Support\n\n* IE 11+\n* Chrome 49+\n* Safari 10+\n* IOS Safari 10+\n* Firefox 29+\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjadriano%2Fvform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjadriano%2Fvform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjadriano%2Fvform/lists"}