{"id":20800156,"url":"https://github.com/octagon-simon/octavalidate","last_synced_at":"2025-05-07T00:08:27.484Z","repository":{"id":44054075,"uuid":"442900248","full_name":"Octagon-simon/octaValidate","owner":"Octagon-simon","description":"This Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.","archived":false,"fork":false,"pushed_at":"2023-02-04T09:21:16.000Z","size":506,"stargazers_count":55,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T00:08:05.896Z","etag":null,"topics":["form","form-validation","html","input","javascript","regular-expression","validation","validation-library","validator"],"latest_commit_sha":null,"homepage":"https://octagon-simon.github.io/projects/octavalidate/","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/Octagon-simon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.paypal.com/donate/?hosted_button_id=ZYK9PQ8UFRTA4","https://buymeacoffee.com/simon.ugorji"]}},"created_at":"2021-12-29T21:59:42.000Z","updated_at":"2024-11-11T05:32:18.000Z","dependencies_parsed_at":"2023-02-18T15:16:07.371Z","dependency_job_id":null,"html_url":"https://github.com/Octagon-simon/octaValidate","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Octagon-simon%2FoctaValidate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Octagon-simon%2FoctaValidate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Octagon-simon%2FoctaValidate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Octagon-simon%2FoctaValidate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Octagon-simon","download_url":"https://codeload.github.com/Octagon-simon/octaValidate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788526,"owners_count":21804284,"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","form-validation","html","input","javascript","regular-expression","validation","validation-library","validator"],"created_at":"2024-11-17T18:12:28.017Z","updated_at":"2025-05-07T00:08:27.443Z","avatar_url":"https://github.com/Octagon-simon.png","language":"JavaScript","funding_links":["https://www.paypal.com/donate/?hosted_button_id=ZYK9PQ8UFRTA4","https://buymeacoffee.com/simon.ugorji"],"categories":[],"sub_categories":[],"readme":"# Octavalidate - JS V1.3.2 [![Verified on Openbase](https://badges.openbase.com/js/verified/octavalidate.svg?style=openbase\u0026token=hRDLECo09Y2dpWagwvsa7n8kkQO4y/lNcnh7ZH4FnH0=)](https://openbase.com/js/octavalidate?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n[![Rate this package](https://badges.openbase.com/js/rating/octavalidate.svg?style=openbase\u0026token=hRDLECo09Y2dpWagwvsa7n8kkQO4y/lNcnh7ZH4FnH0=)](https://openbase.com/js/octavalidate?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\nThis JavaScript library helps to validate your frontend (HTML) forms using validation rules, sophisticated regular expressions and form input attributes.\n\nWe have included a **[demo.html](https://octagon-simon.github.io/octaValidate/demo.html)** file which you can play with to see how this library really works.\n\n\n[![Featured on Openbase](https://badges.openbase.com/js/featured/octavalidate.svg?style=openbase\u0026token=hRDLECo09Y2dpWagwvsa7n8kkQO4y/lNcnh7ZH4FnH0=)](https://openbase.com/js/octavalidate?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n\n## OTHER RELEASES\n\n### Octavalidate - ReactJS\nUse the ReactJS release of this library to validate your front-end forms client-side.\n\n[Visit the package](https://npmjs.com/package/octavalidate-reactjs)\n\n### Octavalidate - PHP\nUse the PHP release of this library to validate your forms server-side.\n\n[Visit the repository](https://github.com/Octagon-simon/octaValidate-PHP)\n\n### Octavalidate - NodeJS\nUse the NodeJS release of this library to validate your forms server-side. \n\n[Visit the package](https://npmjs.com/package/octavalidate-nodejs)\n\n## DOCUMENTATION\n\nVisit the [DOCUMENTATION](https://octagon-simon.github.io/projects/octavalidate/) to learn more about this GREAT Library!\n\n## INSTALL\n\n### CDN\nPlace this script before the \u003ccode\u003e\u0026lt;/head\u0026gt;\u003c/code\u003e tag.\n```html\n\u003cscript src=\"https://unpkg.com/octavalidate@latest/native/validate.js\"\u003e\u003c/script\u003e\n```\n\n### LOCAL\n\n- Download and import the latest release to your project.\n- In your project, create a script tag and link the file `validate.js`.\n- Place the script before the \u003ccode\u003e\u0026lt;/head\u0026gt;\u003c/code\u003e tag.\n```html\n\u003cscript src=\"octaValidate/src/validate.js\"\u003e\u003c/script\u003e\n```\n\n### React JS\n\nVisit this [Link to the Documentation](https://octagon-simon.github.io/projects/octavalidate/reactjs/index.html) to learn how you can install \u0026 use this Library in React JS.\n\n## How to Use\n\nCreate a form tag with input elements and set the attribute **octavalidate** with a list of validation rules on the form input(s) that you want to validate.\n```html\n\u003cform id=\"form_register\"\u003e\n\n    \u003cinput id=\"inp_email\" name=\"email\" type=\"email\" octavalidate=\"R,EMAIL\"\u003e\n\n    \u003cinput id=\"inp_age\" name=\"age\" type=\"number\" octavalidate=\"R,DIGITS\"\u003e\n\n    \u003cbutton type=\"submit\"\u003esubmit\u003c/button\u003e\n\n\u003c/form\u003e\n```\n\u003e Make sure that all input elements have a **unique identifier**.\n\nNow you need to create a new instance of the function and pass in the **form id** as the first argument, and any configuration options as the second argument.\n\nThen begin validation on that particular form by invoking the `validate()` method.\n\n\u003e It is recommended to invoke the `validate()` method when the form is submitted.\n\nThe return type of the `validate()` method is `Boolean`.\n\n- `true` means that there are no validation errors\n\n- `false` means that there are validation errors\n\n```javascript\n//create new instance of the function\nconst myForm = new octaValidate('FORM_ID');\n//listen for submit event\ndocument.getElementById('FORM_ID').addEventListener('submit', function(e){\n    e.preventDefault();\n    //invoke the method\n    if(myForm.validate() === true)\n    { \n      //validation successful\n      //process form data here\n    } else {\n      //validation failed\n    }\n})\n```\n\n## VALIDATION RULES\n\nHere is the list of default validation rules.\n\n- R - A value is required.\n- ALPHA_ONLY - The value must be letters only! (lower-case or upper-case).\n- LOWER_ALPHA - The value must be lower-case letters only.\n- UPPER_ALPHA - The value must be upper-case letters only.\n- ALPHA_SPACES - The value must contain letters or Spaces only!\n- ALPHA_NUMERIC - The value must contain letters and numbers.\n- DATE_MDY - The value must be a valid date with the format mm/dd/yyyy.\n- DIGITS - The value must be valid digits or numbers. \n- PWD - The value must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters. \n- EMAIL - The value must be a valid Email Address.\n- URL - The value must be a valid URL\n- URL_QP - The value must be a valid URL and may contain Query parameters.\n- USERNAME - The value may contain letters, numbers, a hyphen or an underscore.\n- TEXT - The value may contain any of these special characters (. , / () [] \u0026 ! '' \"\" : ; ?)\n\nCan't see a validation rule that you need for your form? Don't worry!\n\nWith `octaValidate`, you have the power to define a custom rule and it will be processed as if it were a default rule.\n  \n## CUSTOM VALIDATION RULES\n\nIn some cases where you need a custom rule, use the method below to define one for your form.\n\n```javascript\n//syntax for custom rule\nmyForm.customRule(RULE_TITLE, REG_EXP, ERROR_TEXT);\n```\nHere's a custom rule to validate an email address.\n\n```javascript\n//custom email validation\nconst rule_title = \"EML\";\nconst reg_exp = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\nconst err_txt = \"Please povide a valid Email Address\";\n//create new instance of the function\nconst myForm = new octaValidate('form_register');\n//define the custom rule\nmyForm.customRule(rule_title, reg_exp, err_txt);\n```\n\nThen on your Input Element, provide the rule title `[ EML ]`.\n\n```html\n\u003cinput type=\"email\" id=\"inp_email\" octavalidate=\"EML\"\u003e\n```\n\u003e Note: All Rule Titles are **case-sensitive!**\n\n## MORE CUSTOM RULES\n\nWhat if you want to define more validation rules?\n\nAll you need to do is to create an object with your validation rule, regular expression and error text separated by a comma, then invoke the `moreCustomRules()` method.\n\n```javascript\n//EMAIL AND URL VALIDATION RULES\nvar rules = {\n    \"EML\": [/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/, \"A Valid email address is required\"],\n    \"URI\": [/^((?:http:\\/\\/)|(?:https:\\/\\/))(www.)?((?:[a-zA-Z0-9]+\\.[a-z]{3})|(?:\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1(?::\\d+)?))([\\/a-zA-Z0-9\\.]*)$/i, \"Please provide a valid URL\"]\n};\n\n//create new instance of the function\nconst myForm = new octaValidate('form_register');\n//define more custom rules\nmyForm.moreCustomRules(rules);\n```\n\u003e Note: You do not need to pass in your **regular expression** as a string! This is because the *JavaScript engine* natively recognizes *regular expressions*.\n\n## CUSTOM ERROR MESSAGE\n\nWe've added an extra attribute that will enable you to provide your custom error message incase a validation fails.\n\nThe table below shows the default validation rules and their attibutes for a custom error message.\n\n| Validation Rule | Description| Validation Text Attribute| \n|-----------------|------------|-------------------------|\n| R               |Required    | ov-required-msg         |\n| EMAIL           |EMAIL       | ov-email-msg         |\n| ALPHA_ONLY      |Alphabets Only| ov-alpha-only-msg |\n| ALPHA_SPACES    |Alphabets and Spaces| ov-alpha-spaces-msg|\n| ALPHA_NUMERIC   |Alphabets with Numbers| ov-alpha-numeric-msg|\n| LOWER ALPHA     |Lowercase letters | ov-lower-alpha-msg|\n| UPPER_ALPHA     |Uppercase letters | ov-upper-alpha-msg|\n| PWD             |Password          | ov-pwd-msg|\n| DIGITS          |Digits            | ov-digits-msg |\n| URL             |URL               | ov-url-msg |\n| URL_QP          |URL with Query Parameters| ov-url-qp-msg |   \n| DATE_MDY        |Date in the format MM/DD/YYYY| ov-date-mdy-msg|\n| USERNAME        |Username          | ov-username-msg |\n| TEXT            |General Text      | ov-text-msg |\n\nHere's how to use the custom error message\n\n```html\n\u003cinput type=\"text\" octavalidate=\"R,USERNAME\" ov-required-msg=\"Your username is required\" ov-username-msg=\"Username should contain letters or numbers\" name=\"username\" id=\"inp_uname\"\u003e\n```\n\u003eThe `R` validation rule validates a CHECKBOX, FILE INPUT ELEMENT, or a TEXT input by marking them as **required fields** and you may provide a custom validation error text using the attribute `ov-required-msg`.\n\n## ATTRIBUTES VALIDATION\n\nCurrently we have 4 attributes validation:\n\n- length validation\n- EqualTo validation\n- File validation\n- Range validation\n### LENGTH VALIDATION\n\nYou can validate: `maxlength, minlength and length` by providing it as an attribute to the form input.\n\n- maxlength (5) - This means that value must be 5 characters or less.\n- minlength (5) - This means that value must be up to 5 characters or more.\n- length (5) - This means that value must be equal to 5 characters.\n\n```html\n\u003cinput type=\"text\" id=\"inp_maxlength\" maxlength=\"5\"\u003e\n\n\u003cinput type=\"text\" id=\"inp_minlength\" minlength=\"5\"\u003e\n\n\u003cinput type=\"text\" id=\"inp_length\" length=\"5\"\u003e\n\n```\n\n### EQUALTO VALIDATION\n\nYou can check if two inputs contain the same values, using the attribute `equalto` on the input element, with a value containing the ID of the other input element to check against.\n\n```html\n\u003cinput type=\"password\" id=\"inp_pwd1\" octavalidate=\"R,PWD\" ov-required-msg=\"Your Password is required\"\u003e\n\u003c!--check if both values match --\u003e\n\u003cinput type=\"password\" id=\"inp_pwd2\" equalto=\"inp_pwd1\" ov-equalto-msg=\"Both passwords do not match\"\u003e\n```\n### FILE VALIDATION\n\nYou can validate: `accept, accept-mime, size, minsize, maxsize` by providing it as an attribute to the file input element.\n\n- accept - Use this attribute to list out the file extensions allowed for upload\n- accept-mime - Use this attribute to list out the file MIME types allowed for upload. It supports a wildcard eg audio/\\*, image/png\n- size (2MB) `single or multiple` - This means that the file provided must be 2MB in size\n- minsize (5MB) `single or multiple` - This means that the file provided must be up to 5MB or more.\n- maxsize (5MB) `single or multiple` - This means that the file provided must be 5MB or less.\n  \nPlease refer to the [documentation](https://octagon-simon.github.io/projects/octavalidate/nativejs/file.html) to learn more about file validation.\n\n### RANGE VALIDATION\n\nYou can validate a range of numbers using this attribute. Say I want a user to provide a number between 1 to 5, I will set up the validation like this on my input element\n\n```html\n\u003cinput type=\"text\" id=\"inp_range\" range=\"1 - 5\"\u003e\n```\n\n## API METHODS\n\n### STATUS\n\nInvoke the `status()` method anytime to check the number of validation errors present on the form.\n\n```javascript\n//Your validation instance\nconst myForm = new octaValidate('form_register');\n//check validation errors\nmyForm.status();\n```\n\n### CALLBACKS\n\nYou can define a function that will execute if there are validation errors or a function that will execute if there are no validation errors.\n\nTo define a callback, invoke the method below then pass in your function as an argument.\n\n```javascript\n//create new instance of the function\nconst myForm = new octaValidate('form_register');\n//success callback\nlet successCB = function(){\n    alert(\"No validation error\");\n}\n//error callback\nlet errorCB = function(){\n    alert(myForm.status()+\" validation error(s)\")\n}\n//invoke the method\nmyForm.validateCallBack(successCB, errorCB);\n```\nIf there are no validation errors, `successCB` will be executed but if there are validation errors, the `errorCB` will be executed.\n\n\u003e Note: This callback feature will only work if validation has started on the form. Make sure to start validating the form by invoking the `validate()` method when the form is being submitted. \n\n## CONFIGURATION\n\nWe have 3 configuration options:\n\n- strictMode: \u003ccode\u003eBoolean\u003c/code\u003e\n  \n  This option removes extra white space from the start and at the end of a form input and also prevents the user from providing reserved keywords as values. Default value is `false`.\n- strictWords: \u003ccode\u003eArray\u003c/code\u003e\n  \n   This option alows you to provide words that users are not supposed to submit. For eg [\"null\", \"error\", \"false\", \"fake\", \"admin\"]. In order to use this option, you must set `strictMode` to `true`.\n\n- errorElem: \u003ccode\u003eObject\u003c/code\u003e\n  \n  This option makes the library to append the error message right after the element provided\n\nTo use any of these options, provide it as an object and pass it as the second argument when creating an instance of octaValidate.\n\n```javascript\n//config options\nconst options = {\n  strictMode : true, \n  strictWords : [\"error\", \"false\", \"invalid\", \"fake\", \"admin\"],\n  errorElem : {\n    \"INPUT_ID\" : \"INPUT_ID_WRAPPER\"\n  }\n}\n//my function instance\nconst myForm = new octaValidate('FORM_ID', options);\n```\n\n## REFERENCE METHODS\nAfter creating an instance of the function, the methods below becomes available for use.\n\n```javascript\n//create instance of the function\nconst myForm = new octaValidate('FORM_ID');\n```\n\n- `validate()`\n  \n  Invoke this method to begin validation\n- `status()` \n  \n  Invoke this method to see the number of validation errors on a form\n- `form()` \n  \n  This method returns the form ID attached to the instance.\n- `customRule(RULE_TITLE, REG_EXP, ERROR_TEXT)`\n  \n   Invoke this method to define your custom validation rule.\n- `moreCustomRules(RULES)`\n  \n    Invoke this method to define more custom validation rules.\n- `version()`\n  \n  Invoke this method to retrieve the library's version number.\n- `validateCallBack(success_callback, error_callback)`\n\n    Invoke this method, providing your success callback or error callback as arguments. The success callback will execute when there are no validation errors and the error callback will execute when there are validation errors\n  \n\u003e There are more methods in the documentation, please visit the [documentation](https://octagon-simon.github.io/projects/octavalidate/nativejs/api.html) to learn more.\n\n## LEARN MORE\nDo you need a detailed explanation on how to use this library? \n[Read the article on Medium](https://blog.bitsrc.io/client-side-form-validation-using-octavalidate-javascript-b150f2d14e99)\n\n## DEMO\n\n- Open **[demo.html](https://octagon-simon.github.io/octaValidate/demo.html)** (also included in the folder) and submit the form.\n  \n## SCREENSHOTS\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/form-error.png\" width=\"200px\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/form-success.png\" width=\"200px\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/contact-page.png\" width=\"200px\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/file-1.png\" width=\"200px\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/file-2.png\" width=\"200px\"\u003e\n    \u003cimg src=\"https://octagon-simon.github.io/octaValidate/img/strict-1.png\" width=\"200px\"\u003e\n\u003c/div\u003e\n\n## Author\n\n[Simon Ugorji](https://twitter.com/ugorji_simon)\n\n## Support Me\n\n[Donate with PayPal](https://www.paypal.com/donate/?hosted_button_id=ZYK9PQ8UFRTA4)\n\n[Buy me a coffee](https://buymeacoffee.com/simon.ugorji)\n\n## Contributors\n\n[Simon Ugorji](https://twitter.com/ugorji_simon)\n\n[Chamberlain Ezigbo](https://twitter.com/chamberlin5050)\n\n\u003ca href=\"https://github.com/Octagon-simon/octaValidate/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Octagon-simon/octaValidate\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctagon-simon%2Foctavalidate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foctagon-simon%2Foctavalidate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctagon-simon%2Foctavalidate/lists"}