{"id":36545131,"url":"https://github.com/towardstudio/bluegg-validation","last_synced_at":"2026-01-12T05:59:41.701Z","repository":{"id":89544246,"uuid":"66924152","full_name":"towardstudio/bluegg-validation","owner":"towardstudio","description":"Simple form validation, using HTML5 shaped cowpaths","archived":false,"fork":false,"pushed_at":"2017-11-24T16:09:39.000Z","size":24,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T16:53:15.068Z","etag":null,"topics":["data-attribute-html","forms","html5","js","validation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/towardstudio.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":"2016-08-30T08:58:12.000Z","updated_at":"2018-04-25T20:39:52.000Z","dependencies_parsed_at":"2024-05-05T13:46:44.175Z","dependency_job_id":null,"html_url":"https://github.com/towardstudio/bluegg-validation","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"d28934929b882b3657dc8cdc9375594becd42d2d"},"previous_names":["Bluegg/bluegg-validation","bluegg/bluegg-validation"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/towardstudio/bluegg-validation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/towardstudio%2Fbluegg-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/towardstudio%2Fbluegg-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/towardstudio%2Fbluegg-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/towardstudio%2Fbluegg-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/towardstudio","download_url":"https://codeload.github.com/towardstudio/bluegg-validation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/towardstudio%2Fbluegg-validation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28336038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["data-attribute-html","forms","html5","js","validation"],"created_at":"2026-01-12T05:59:41.121Z","updated_at":"2026-01-12T05:59:41.696Z","avatar_url":"https://github.com/towardstudio.png","language":"JavaScript","readme":"# Bluegg Validation\n\nSimple form validation, using HTML5 shaped cowpaths.\n[Here's a demo on Codepen](https://codepen.io/matthewbeta/pen/Rjymaa)\n\n**Read the disclaimer file in the repo. Also: this is not a substitute for\nserver side validation - make sure you do that! Did I mention the disclaimer**\n\n## How to\n\n### Installation\n\nInstall it\n\n```bash\nnpm install bluegg-validation --save\n```\n\nThen require it (or import it if your using Babel - I don't care)\n\n```js\nconst validation = require('bluegg-validation');\n```\n\n### JS Usage\n\nEither use the defaults:\n\n```js\nvar validation = new Validation();\n```\n\nOr use the options:\n\n```js\nvar validation = new Validation({\n\tform: '#myform',\n\terrorClass: 'wrong-idiot',\n\tfieldContainer: '.input-wrap'\n});\n```\n\n### HTML Usage \u0026 Tips\n\nPlease first make a nice accessible and semantic form. If you only want the\ndefault functionality, you can simply add a `data-validate` attribute to your\nform element and off you go:\n\n```html\n\u003cform action=\"somethingcool.php\" method=\"post\" data-validate\u003e\n  \u003c!-- ... --\u003e\n```\n\n### Validation\n\nThe validation uses the built-in browser validation. That is, if a field is\nrequired, it will be invalid if its empty and if a field of a certain type it\nwill be invalid if it isn't filled in correctly. The browser uses a bunch of\ndifferent attributes to validate against. It will definitely (read disclaimer)\nvalidate against these (and maybe some other stuff)\n[all from MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes):\n\n#### required\n\nThis attribute specifies that the user must fill in a value before submitting a\nform. It cannot be used when the type attribute is hidden, image, or a button\ntype (submit, reset, or button).\n\n#### minlength \u0026 maxlength\n\nIf the value of the type attribute is text, email, search, password, tel, or\nurl, this attribute specifies the minimum/maximum number of characters (in\nUTF-16 code units) that the user can enter. For other control types, it is\nignored. It can exceed the value of the size attribute. If it is not specified,\nthe user can enter an unlimited number of characters. Specifying a negative\nnumber results in the default behaviour (i.e. the user can enter an unlimited\nnumber of characters). The constraint is evaluated only when the value of the\nattribute has been changed.\n\n#### pattern\n\nA regular expression that the control's value is checked against. The pattern\nmust match the entire value, not only some subset. Use the title attribute to\ndescribe the pattern to help the user. This attribute applies when the value of\nthe type attribute is text, search, tel, url, email, or password, otherwise it\nis ignored. The regular expression language is the same as JavaScript RegExp\nalgorithm, with the 'u' parameter that makes it treat the pattern as a sequence\nof unicode code points. The pattern is not surrounded by forward slashes.\n\n#### min \u0026 max\n\nThe minimum/maximum (numeric or date-time) value for this item, which must not\nbe greater/less than its maximum/minimum (max/min attribute) value.\n\n#### Types\n\nIt will also uses the browsers default validation for `type=\"email\"`,\n`type=\"url\"`, `type=\"number\"`, etc... This can be a bit clunky but you can fill\nin the gaps with the pattern attribute regex stuff.\n\n### Error Messages\n\nBy default, the error messages are supplied by your browser. You can customise\nthe error messages for the field using `data-attributes` on the field. You have\n2 options:\n\n#### Required Error Messages\n\nIf the field is required this message will show if it is not filled in:\n\n```html\n\u003cinput type=\"text\" name=\"text\" id=\"text\" class=\"form__field\" data-error-required=\"This field is required\" required\u003e\n```\n\n#### Invalid Error Messages\n\nThis is the message that will show for any other reason. e.g. Its not a valid\nemail address:\n\n```html\n\u003cinput data-error-invalid=\"Please enter a valid email address\" type=\"email\" name=\"email\" id=\"email\" class=\"form__field\"\u003e\n```\n\n#### Invalid and required\n\nYou can also add both kinds of message to the same input. Whicvh ever one is\nappropriate will show up:\n\n```html\n\u003cinput data-error-required=\"This field is required\" data-error-invalid=\"Please enter a valid url, including the http(s) protocol\" type=\"url\" name=\"url\" id=\"url\" class=\"form__field\" required\u003e\n```\n\n### JS Options\n\n#### options.form\n\nType: `string` Default: `[data-validate]`\n\nA css selector for your form (e.g. '`#form`', '`.my-form`',\n'`[data-validate-me]`', etc ). This should be unique to the page.\n\n#### options.errorClass\n\nType: `string` Default: `error`\n\nA string of the classname you wanted added to the input element (or wrapper\nelement).\n\n#### options.fieldContainer\n\nType: `string` Default: `null`\n\nA css selector for a parent of the form field you want the error class added to.\nThe JS will go through all the parents until it finds it so make sure its\ndefinitely a parent.\n\n#### options.validateLive\n\nType: `boolean` Default: `true`\n\nBy default your form fields will be marked invalid as soon as you remove focus.\nIt will also re-validate on keyup, if the field has been marked invalid. This\nmakes your form look a bit slicker as as soon as the user makes it invalid or\ncorrect the UI will update automatically. If you want to remove this, pass in\n`false` for this option\n\n### Examples\n\n#### Multiple forms with different settings\n\n```js\nconst Validation = require('bluegg-validation');\n\nvar contactForm = new Validation({\n\tform: '#contactForm',\n\terrorClass: 'validation-error',\n\tfieldContainer: '.form__row'\n});\n\nvar signupForm = new Validation({\n\tform: '#signupForm',\n\terrorClass: 'inline-error'\n});\n```\n\n#### Inline messages\n\nThe HTML 5 validation messages only show up one at a time on submit. In most\ncases, this is fine. However you might want to show inline messages as soon as a\nfield is invalid (and remove it as soon as its updated). This is also possible\nwith some tinkering.\n\nFirst set up your field HTML with a parent container element, and/or a sibling\nvalidation message like so (note the aria-live attribute):\n\n```html\n\u003cdiv\u003e\n\t\u003clabel for=\"email\"\u003eYour email\u003c/label\u003e\n\t\u003cinput type=\"email\" name=\"email\" id=\"email\" data-error-invalid=\"Please enter a valid url, including the http(s) protocol\"\u003e\n\t\u003cspan class=\"error-msg\" aria-live=\"polite\"\u003edata-error-invalid=\"Please enter a valid url, including the http(s) protocol\"\u003c/span\u003e\n\u003c/div\u003e\n```\n\nThen style it so the message is hidden by default but appears when the error\nclass is added to the parent, or to the form field:\n\n```css\n.error-msg {\n\tdisplay: none;\n\tcolor: red;\n}\n/* with wrapper element */\n.is-error \u003e .error-msg {\n\tdisplay: block;\n}\n/* or no wrapper element */\n.is-error + .error-msg {\n\tdisplay: block;\n}\n```\n\n## Credits\n\nInspired by this\n[blog post by Dave Rupert](https://daverupert.com/2017/11/happier-html5-forms/)\nand my love of [Parsley JS](http://parsleyjs.org/), but not its love of\njQuery....\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftowardstudio%2Fbluegg-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftowardstudio%2Fbluegg-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftowardstudio%2Fbluegg-validation/lists"}