{"id":15391300,"url":"https://github.com/rtivital/validate","last_synced_at":"2025-04-15T23:10:29.981Z","repository":{"id":40531577,"uuid":"46918014","full_name":"rtivital/validate","owner":"rtivital","description":"Modern lightweight library without dependencies for the data validation from single input tag","archived":false,"fork":false,"pushed_at":"2016-02-10T08:07:17.000Z","size":47,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T04:35:57.598Z","etag":null,"topics":["library","validation"],"latest_commit_sha":null,"homepage":"http://rtivital.github.io/validate","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/rtivital.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}},"created_at":"2015-11-26T09:50:17.000Z","updated_at":"2022-12-01T23:28:35.000Z","dependencies_parsed_at":"2022-06-30T07:00:12.095Z","dependency_job_id":null,"html_url":"https://github.com/rtivital/validate","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Fvalidate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Fvalidate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Fvalidate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtivital%2Fvalidate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtivital","download_url":"https://codeload.github.com/rtivital/validate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647302,"owners_count":21139086,"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":["library","validation"],"created_at":"2024-10-01T15:10:39.860Z","updated_at":"2025-04-15T23:10:29.953Z","avatar_url":"https://github.com/rtivital.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Input Validator\nInput Validator is a modern lightweight library without dependencies for the data validation from single `\u003cinput /\u003e` tag. \n\nView demo [here](http://rtivital.github.io/validate/)\n\n## Installation\nInstall with Bower:\n\n```\nbower install input-validator.js\n```\n\nOr clone from Github:\n\n```\ngit clone https://github.com/rtivital/validate.git\n```\n\n\nInclude library before closing `\u003cbody\u003e` tag\n\n```html\n\u003cbody\u003e\n\t...\n\t\u003cscript src=\"input-validator.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nGrab the `\u003cinput /\u003e` tag from the DOM tree and start the data validation\n```javascript\nvar emailInput = new Validator.init(document.getElementById('email'), {\n  rules: {\n    min: 5,\n    max: 20,\n    match: 'email'\n  },\n  onError: function() {\n    var parentNode = this.element.parentNode;\n    parentNode.classList.add('has-error');\n    parentNode.classList.remove('has-success');\n    parentNode.querySelector('.help-block').textContent = 'Error: ' + this.message;\n  },\n  onSuccess: function() {\n    var parentNode = this.element.parentNode;\n    parentNode.classList.add('has-success');\n    parentNode.classList.remove('has-error');\n    parentNode.querySelector('.help-block').textContent = 'Everything is valid!';\n  }\n});\n```\n\n## Documentation\n### Configuration object\n`Validator.init` function accepts consfiguration object like this one: \n```javascript\n{\n  rules: {\n    min: 5,\n    max: 20,\n    match: 'email'\n  },\n  onError: function() {\n    console.log('Error' + this.message);\n  },\n  onSuccess: function() {\n    console.log('Everything is valid!');\n  }\n}\n```\nThese are minimum set of values. Additionally you can pass in `messages` and `regExps` objects to replace predefined settings or add your own testing rules:\n```javascript\n// Defaults:\n{\n  regExps: {\n    email: /^([\\w-]+(?:\\.[\\w-]+)*)@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-z]{2,6}(?:\\.[a-z]{2})?)$/i,\n    url: /^((https?):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)|)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=\u0026%@!\\-\\/]))?$/,\n    numbers: /^\\d+(\\.\\d{1,2})?$/,\n    digit: /[0-9]*$/,\n    letters: /[a-z][A-Z]*$/\n  },\n  messages = {\n    required: 'This field is required',\n    min: 'This field should contain at least %rule% characters',\n    max: 'This field should not contain more than %rule% characters',\n    match: 'This field shold countain a valid %rule%'\n  }\n}\n```\n\n### Basic validation\nGenerally, you want the validation to occur with certain events (e.g. click, keyup, etc.). In this case consider this code:\n```javascript\nvar onError = function() {\n  var parentNode = this.element.parentNode;\n  parentNode.classList.add('has-error');\n  parentNode.classList.remove('has-success');\n  parentNode.querySelector('.help-block').textContent = 'Ошибка: ' + this.message;\n};\n\nvar onSuccess = function() {\n  var parentNode = this.element.parentNode;\n  parentNode.classList.add('has-success');\n  parentNode.classList.remove('has-error');\n  parentNode.querySelector('.help-block').textContent = 'Ура! Всё прошло хорошо, ваши данные полность валидные.';\n};\n\nvar emailInput = new Validator.init(document.getElementById('email'), {\n  rules: {\n    min: 5,\n    max: 20,\n    match: 'email'\n  }\n  onError: onError,\n  onSuccess: onSuccess\n});\n\ndocument.getElementById('validate-btn').addEventListener('click', function(e) {\n  e.preventDefault();\n  emailInput.validate();\n});\n```\n\n### Validation methods\n#### required\n`Validator.fn.required` returns if the value contains at least one symbol, except for whitespace\n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    required: true\n  }\n});\n```\n#### min\n`Validator.fn.min` returns if the value length is more than provided length\n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    min: 8\n  }\n});\n```\n#### max\n`Validator.fn.max` returns if the value length is less than provided length\n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    max: 20\n  }\n});\n```\n#### match\n`Validator.fn.match` returns if the value matches certain pattern. Available patterns:\n\n* email\n* url\n* numbers\n* digits\n* letters \n\n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    match: 'email'\n  }\n});\n```\n\nYou can also define tou regular expression in config object and then use it:\n```javascript\nvalidate(document.getElementById('email'), {\n  regExps: {\n    base64: /[^a-zA-Z0-9\\/\\+=]/i\n  },\n  rules: {\n    match: 'base64'\n  }\n});\n```\n### Callbacks\n#### onError\n`onError` callback, which you define in config object, will be called every time `Validator.fn.validate` method fails: \n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    min: 8,\n    max: 50,\n    match: 'email'\n  },\n  onError: function() {\n    console.log('Error: ' + this.message);\n  }\n});\n```\n#### onSuccess\n`onSuccess` callback, which you define in config object, will be called every time `Validator.fn.validate` method passed: \n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    min: 8,\n    max: 50,\n    match: 'email'\n  },\n  onSuccess: function() {\n    console.log('Everything is valid');\n  }\n});\n```\n\n#### Creating messages\nYou can create your own messages with simple template variables `%rule%` and `%data%`:\n```javascript\nvalidate(document.getElementById('email'), {\n  rules: {\n    min: 8,\n    max: 50,\n    match: 'email'\n  },\n  messages: {\n    min: 'The value of this field shold be at least %rule% characters long. Value %data% does\\'t fit well!',\n    max: 'The value of this field shold not be longer than %rule% characters. Value %data% does\\'t fit well!',\n    match: '%data% is not a valid %rule% address'\n  }\n});\n```\n\n`%data%` refers to the current value from input field. `%rule%` refers to current param (e.g. 8 at `min`, 50 at `max` and `email` at `match`).\n\n\n## Browser support\nInput validator uses `Object.keys()` [ES5](http://caniuse.com/#feat=es5) feature. \n\nBrowser Support:\n* IE 9+\n* Chrome 23+\n* Firefox 21+\n* Opera 15+\n* Safari 6+","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtivital%2Fvalidate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtivital%2Fvalidate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtivital%2Fvalidate/lists"}