{"id":13596371,"url":"https://github.com/cferdinandi/validate","last_synced_at":"2025-04-09T16:32:23.527Z","repository":{"id":66212357,"uuid":"93644332","full_name":"cferdinandi/validate","owner":"cferdinandi","description":"A lightweight form validation script.","archived":true,"fork":false,"pushed_at":"2018-11-09T17:15:56.000Z","size":150,"stargazers_count":230,"open_issues_count":5,"forks_count":39,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-11-06T19:43:43.565Z","etag":null,"topics":["form-validation","forms","html5","html5-forms","javascript-plugin","javscript","no-dependencies","vanilla-js"],"latest_commit_sha":null,"homepage":null,"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/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-07T14:25:43.000Z","updated_at":"2024-08-05T17:08:36.000Z","dependencies_parsed_at":"2023-02-21T23:15:43.790Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/validate","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fvalidate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fvalidate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fvalidate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fvalidate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/validate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067893,"owners_count":21042372,"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":["form-validation","forms","html5","html5-forms","javascript-plugin","javscript","no-dependencies","vanilla-js"],"created_at":"2024-08-01T16:02:22.161Z","updated_at":"2025-04-09T16:32:18.509Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","readme":"# Validate.js [![Build Status](https://travis-ci.org/cferdinandi/validate.svg)](https://travis-ci.org/cferdinandi/validate)\nA lightweight form validation script that augments native HTML5 form validation elements and attributes, providing a better user experience and giving you more control.\n\nWhen a visitor leaves a field, Validate.js immediately validates the field and displays an error if applicable. It also validates the entire form on submit, and provides support for custom `onSubmit()` functions (for example, Ajax form submission).\n\n[View the demo](http://cferdinandi.github.io/validate/)\n\n## Deprecation Notice\n\nThis plugin has been deprecated and replaced with [Bouncer](https://github.com/cferdinandi/bouncer), which uses the came conventions but has better under-the-hood engineering.\n\nValidate.js attempted to use the Constraint Validation API to validate fields. The API is buggy at best, and smoothing it across browsers became an increasingly difficult task. As a result, I wrote an entirely new plugin from the ground-up.\n\nBecause this plugin was featured in [my CSS Tricks series](https://css-tricks.com/form-validation-part-1-constraint-validation-html/), I'm leaving it up in read only mode for archival purposes.\n\nIt will no longer be maintained or updated.\n\n\n\u003chr\u003e\n\n### Want to learn how to write your own vanilla JS plugins? Check out my [Vanilla JS Pocket Guides](https://vanillajsguides.com/) or join the [Vanilla JS Academy](https://vanillajsacademy.com) and level-up as a web developer. 🚀\n\n\u003chr\u003e\n\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include Validate.js on your site.\n\nThere are two versions of Validate: the standalone version, and one that comes preloaded with a polyfill for the Validaty State API, which is only supported in newer browsers and implemented inconsistently.\n\nIf you're including your own polyfill or don't want to enable this feature for older browsers, use the standalone version. Otherwise, use the version with the polyfill.\n\n**Direct Download**\n\nYou can [download the files directly from GitHub](https://github.com/cferdinandi/validate/archive/master.zip).\n\n```html\n\u003cscript src=\"path/to/validate.polyfills.min.js\"\u003e\u003c/script\u003e\n```\n\n**CDN**\n\nYou can also use the [jsDelivr CDN](https://cdn.jsdelivr.net/gh/cferdinandi/validate/dist/). I recommend linking to a specific version number or version range to prevent major updates from breaking your site. Validate uses semantic versioning.\n\n```html\n\u003c!-- Always get the latest version --\u003e\n\u003c!-- Not recommended for production sites! --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/validate/dist/validate.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Get minor updates and patch fixes within a major version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/validate@2/dist/validate.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Get patch fixes within a minor version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/validate@2.2/dist/validate.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Get a specific version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/validate@2.2.0/dist/validate.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Get a specific version with legacy browser support --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/cferdinandi/validate@2.2.0/dist/validate.polyfills.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Use HTML5 semantic input types and validation-related attributes on your form fields.\n\nAdd the `required` attribute to required fields. Use `type=\"email\"` and `type=\"url\"` for email addresses and URLs, respectively. Include `pattern` attributes, `min` and `max`, and so on to set validation criteria for your form fields. View a [full list of types and attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Intrinsic_and_basic_constraints).\n\n```html\n\u003cdiv\u003e\n\t\u003clabel for=\"email\"\u003eEmail\u003c/label\u003e\n\t\u003cinput type=\"email\" id=\"email\" required\u003e\n\u003c/div\u003e\n\n\u003cdiv\u003e\n\t\u003clabel for=\"url\"\u003eURL\u003c/label\u003e\n\t\u003cinput type=\"url\" id=\"url\" required\u003e\n\u003c/div\u003e\n```\n\nIf you're using validation patterns, you can also include a `title` with a custom validation message. This will display in the error message.\n\n```html\n\u003cdiv\u003e\n\t\u003clabel for=\"password\"\u003ePassword (At least 1 uppercase character, 1 lowercase character, and 1 number)\u003c/label\u003e\n\t\u003cinput type=\"password\" id=\"password\" value=\"\" title=\"Please choose a password that includes at least 1 uppercase character, 1 lowercase character, and 1 number.\" pattern=\"^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\\s).*$\" required\u003e\n\u003c/div\u003e\n```\n\n### 3. Flag your form for validation.\n\nAdd the `[data-validate]` attribute to any forms you want validated.\n\n```html\n\u003cform data-validate\u003e\n\t...\n\u003c/form\u003e\n```\n\n### 4. Initialize Validate.js.\n\nIn the footer of your page, after the content, initialize Validate.js. And that's it, you're done. Nice work!\n\n```html\n\u003cscript\u003e\n\tvalidate.init();\n\u003c/script\u003e\n```\n\n\n\n## ES6 Modules\n\nValidate does not have a default export, but does support CommonJS and can be used with native ES6 module imports.\n\n```js\nimport('/path/to/validate.polyfills.min.js')\n\t.then(function () {\n\t\tvalidate.init();\n\t});\n```\n\nIt uses a UMD pattern, and should also work in most major module bundlers and package managers.\n\n\n\n## Styling Errors\n\nValidate.js does not come pre-packaged with any styles for fields with errors or error messages. Use the `.error` class to style fields, and the `.error-message` class to style error messages.\n\nNeed a starting point? Here's some really lightweight CSS you can use.\n\n```css\n/**\n * Form Validation Errors\n */\n.error {\n\tborder-color: red;\n}\n\n.error-message {\n\tcolor: red;\n\tfont-style: italic;\n\tmargin-bottom: 1em;\n}\n```\n\n\n\n## Working with the Source Files\n\nIf you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code.\n\n### Dependencies\nMake sure these are installed first.\n\n* [Node.js](http://nodejs.org)\n* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`\n\n### Quick Start\n\n1. In bash/terminal/command line, `cd` into your project directory.\n2. Run `npm install` to install required files.\n3. When it's done installing, run one of the task runners to get going:\n\t* `gulp` manually compiles files.\n\t* `gulp watch` automatically compiles files when changes are made and applies changes using [LiveReload](http://livereload.com/).\n\n\n\n## Options and Settings\n\nValidate.js includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.\n\n### Global Settings\n\nYou can pass options and callbacks into Validate through the `init()` function:\n\n```javascript\nvalidate.init({\n\n\t// Classes and Selectors\n\tselector: '[data-validate]', // The selector for forms to validate\n\tfieldClass: 'error', // The class to apply to fields with errors\n\terrorClass: 'error-message', // The class to apply to error messages\n\n\t// Messages\n\tmessageValueMissing: 'Please fill out this field.', // Displayed when a required field is left empty\n\tmessageValueMissingCheckbox: 'This field is required.', // Displayed when a required checkbox isn't checked\n\tmessageValueMissingRadio: 'Please select a value.', // Displayed when a required radio button isn't selected\n\tmessageValueMissingSelect: 'Please select a value.', // Displayed when an option from a required select menu isn't selected\n\tmessageValueMissingSelectMulti: 'Please select at least one value.', // Displayed when an option from a require multi-select menu isn't selected\n\tmessageTypeMismatchEmail: 'Please enter an email address.', // Displayed when a `type=\"email\"` field isn't a valid email\n\tmessageTypeMismatchURL: 'Please enter a URL.', // Displayed when a `type=\"url\"` field isn't a valid URL\n\tmessageTooShort: 'Please lengthen this text to {minLength} characters or more. You are currently using {length} characters.', // Displayed with the `minLength` attribute is used and the input value is too short\n\tmessageTooLong: 'Please shorten this text to no more than {maxLength} characters. You are currently using {length} characters.', // Displayed with the `maxLength` attribute is used and the input value is too long\n\tmessagePatternMismatch: 'Please match the requested format.', // Displayed with the `pattern` attribute is used and the pattern doesn't match (if a `title` attribute is used, that's displayed instead)\n\tmessageBadInput: 'Please enter a number.', // Displayed when the field is numeric (ex. `type=\"number\"`) but the value is not a number\n\tmessageStepMismatch: 'Please select a valid value.', // Displayed when the `step` attribute is used and the value doesn't adhere to it\n\tmessageRangeOverflow: 'Please select a value that is no more than {max}.', // Displayed with the `max` attribute is used and the input value is too hight\n\tmessageRangeUnderflow: 'Please select a value that is no less than {min}.', // Displayed with the `mind` attribute is used and the input value is too low\n\tmessageGeneric: 'The value you entered for this field is invalid.', // A catchall error, displayed when the field fails validation and none of the other conditions apply\n\n\t// Form Submission\n\tdisableSubmit: false, // If true, don't submit the form to the server (for Ajax for submission)\n\tonSubmit: function (form, fields) {}, // Function to run if the form successfully validates\n\n\t// Callbacks\n\tbeforeShowError: function (field, error) {}, // Function to run before an error is display\n\tafterShowError: function (field, error) {}, // Function to run after an error is display\n\tbeforeRemoveError: function (field) {}, // Function to run before an error is removed\n\tafterRemoveError: function (field) {}, // Function to run after an error is removed\n\n});\n```\n\n### Use Validate.js events in your own scripts\n\nYou can also call Validate.js's public methods in your own scripts.\n\n#### hasError()\nCheck if a field has a validation error.\n\n```javascript\nvalidate.hasError(\n\tfield, // The field to validate\n\toptions // User settings, same as the ones passed in during validate.init() [optional]\n);\n```\n\n**Example**\n\n```javascript\nvar field = document.querySelector('[name=\"email\"]');\nvar error = validate.hasError(field);\n\nif (error) {\n\t// Do something...\n}\n```\n\n#### showError()\nShow an error message on a field.\n\n```javascript\nvalidate.showError(\n\tfield, // The field to show an error message for\n\terror, // The error message to show\n\toptions // User settings, same as the ones passed in during validate.init() [optional]\n);\n```\n\n**Example 1: Write your own error**\n\n```javascript\nvar field = document.querySelector('[name=\"email\"]');\nvar error = 'This field is wrong, dude!';\nvalidate.showError(field, error);\n```\n\n**Example 2: Using `hasError()`**\n\n```javascript\nvar field = document.querySelector('[name=\"url\"]');\nvar error = validate.hasError(field);\nvalidate.showError(field, error);\n```\n\n#### removeError()\nRemove the error message from a field.\n\n```javascript\n/**\n * Remove an error message from a field\n * @public\n * @param  {Node}   field   The field to remove the error from\n * @param  {Object} options User options\n */\nvalidate.removeError(\n\tfield, // The field to remove the error from\n\toptions // User settings, same as the ones passed in during validate.init() [optional]\n);\n```\n\n**Example**\n\n```javascript\nvar field = document.querySelector('[name=\"email\"]');\nvalidate.removeError(field);\n```\n\n#### destroy()\nDestroy the current `validate.init()`. Removes all errors and resets the DOM. This is called automatically during the `init` function to remove any existing initializations.\n\n```javascript\nvalidate.destroy();\n```\n\n\n## Browser Compatibility\n\nValidate.js works in all modern browsers, and (mostly) IE 10 and above.\n\nUnfortunately, not all validation types are supported by all versions of IE and Edge consistently. For example, IE10 and IE11 will check if a form input is too long (using the `maxLength` attribute), but Edge will not. And no version of IE or Edge will check if it's too short (using the `minLength` attribute).\n\n### Polyfills\n\nUse the included polyfill version of Validate (or include your own) to push support back to IE10, and add missing features to partially supported browsers.\n\nIf you also include [Eli Grey's classList.js polyfill](https://github.com/eligrey/classList.js/), you can push support even further, back to IE9.\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fvalidate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fvalidate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fvalidate/lists"}