{"id":21091021,"url":"https://github.com/muhammedrahil/easy-js-form-validation-module","last_synced_at":"2026-05-17T21:03:01.529Z","repository":{"id":254811612,"uuid":"847610176","full_name":"muhammedrahil/Easy-Js-Form-Validation-Module","owner":"muhammedrahil","description":"Js-Form-Validation: A lightweight JavaScript module for easy and customizable form validation. Supports email, phone number, and general text input validation with flexible error message styling.","archived":false,"fork":false,"pushed_at":"2024-08-26T09:00:09.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T01:13:01.787Z","etag":null,"topics":["javascript","validation","validation-error"],"latest_commit_sha":null,"homepage":"","language":null,"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/muhammedrahil.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":"2024-08-26T07:42:05.000Z","updated_at":"2024-08-28T13:33:20.000Z","dependencies_parsed_at":"2024-08-26T10:02:33.716Z","dependency_job_id":"898e9ee7-2deb-4aff-a5be-992eebee27fa","html_url":"https://github.com/muhammedrahil/Easy-Js-Form-Validation-Module","commit_stats":null,"previous_names":["muhammedrahil/js-form-validation","muhammedrahil/easy-js-form-validation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhammedrahil%2FEasy-Js-Form-Validation-Module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhammedrahil%2FEasy-Js-Form-Validation-Module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhammedrahil%2FEasy-Js-Form-Validation-Module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muhammedrahil%2FEasy-Js-Form-Validation-Module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muhammedrahil","download_url":"https://codeload.github.com/muhammedrahil/Easy-Js-Form-Validation-Module/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243532773,"owners_count":20306209,"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":["javascript","validation","validation-error"],"created_at":"2024-11-19T21:42:42.025Z","updated_at":"2026-05-17T21:03:01.446Z","avatar_url":"https://github.com/muhammedrahil.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Easy-Js-Form-Validation\n\nJs-Form-Validation is a lightweight JavaScript module designed to streamline and enhance form validation in your web applications. It provides a simple, yet powerful way to validate form fields such as emails, phone numbers, and general text inputs. This module offers customizable error message displays with options for adding custom styles and classes, making it easy to integrate into any project.\n\n\n## Features\n\n- Email Validation: Checks if the input matches a standard email format and allows you to set custom minimum and maximum length requirements.\n  \n- Phone Number Validation: Validates phone numbers against a regex pattern and provides customizable length restrictions.\n  \n- General Field Validation: Ensures that required fields are filled and within specified length constraints.\n  \n- Customizable Error Messages: Display error messages with custom styles, classes, and positioning.\n  \n- Direct Style Application: Apply styles directly to error messages or through CSS classes.\n  \n- Flexible Configuration: Supports both required and optional fields with different validation rules.\n  \n- Error Clearing: Automatically clears previous error messages before validating the form.\n  \n- Easy Integration: Simple to integrate with any form, just pass in the form ID and error message configurations.\n\n- Event Handling: Trigger form validation on form submission, and prevent submission if validation fails.\n\n\n```javascript\nclass ErrorMessageDisplay {\n    validateForm(errorMessages) {\n        this.clearErrorMessages();\n        let is_error = false;\n        for (const errorMessageObject of errorMessages) {\n            const { fieldId, errorMessage, type, maxlength = 256, minlength = 0, is_required = true, styles = \"\", classes = \"\", direct_style = false } = errorMessageObject;\n            const field = document.getElementById(fieldId).value.trim();\n            // const checkBox_field = document.getElementById(fieldId);\n            switch (type) {\n                case \"email\":\n                    const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n                    if (is_required) {\n                        if (field.length == 0) {\n                            this.displayErrorMessages(fieldId, errorMessage, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (!emailRegex.test(field)) {\n                            this.displayErrorMessages(fieldId, \"Invalid Email Format\", styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003e maxlength) {\n                            this.displayErrorMessages(fieldId, `Email exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003c minlength) {\n                            this.displayErrorMessages(fieldId, `Email is below minimum length of ${minlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        }\n                    } else {\n                        if (field.length \u003e 0) {\n                            if (!emailRegex.test(field)) {\n                                this.displayErrorMessages(fieldId, \"Invalid Email Format\", styles, classes, direct_style);\n                                is_error = true;\n                            } else if (field.length \u003e maxlength) {\n                                this.displayErrorMessages(fieldId, `Email exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            } else if (field.length \u003c minlength) {\n                                this.displayErrorMessages(fieldId, `Email is below minimum length of ${minlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            }\n                        }\n                    }\n                    break;\n                case \"phone_number\":\n                    const phoneNoRegex = /^\\+?[0-9]+$/;\n                    if (is_required) {\n                        if (field.length == 0) {\n                            this.displayErrorMessages(fieldId, errorMessage, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (phoneNoRegex.test(field) == false) {\n                            this.displayErrorMessages(fieldId, \"Invalid Phone Number Format\", styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003e maxlength) {\n                            this.displayErrorMessages(fieldId, `Phone Number exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003c minlength) {\n                            this.displayErrorMessages(fieldId, `Phone Number is below minimum length of ${minlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        }\n                    } else {\n                        if (field.length \u003e 0) {\n                            if (phoneNoRegex.test(field) == false) {\n                                this.displayErrorMessages(fieldId, \"Invalid Phone Number Format\", styles, classes, direct_style);\n                                is_error = true;\n                            } else if (field.length \u003e maxlength) {\n                                this.displayErrorMessages(fieldId, `Phone Number exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            } else if (field.length \u003c minlength) {\n                                this.displayErrorMessages(fieldId, `Phone Number is below minimum length of ${minlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            }\n                        }\n                    }\n                    break;\n                case \"general\":\n                    if (is_required) {\n                        if (field.length == 0) {\n                            this.displayErrorMessages(fieldId, errorMessage, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003e maxlength) {\n                            this.displayErrorMessages(fieldId, `Field exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        } else if (field.length \u003c minlength) {\n                            this.displayErrorMessages(fieldId, `Field is below minimum length of ${minlength}`, styles, classes, direct_style);\n                            is_error = true;\n                        }\n                    } else {\n                        if (field.length \u003e 0) {\n                            if (field.length \u003e maxlength) {\n                                this.displayErrorMessages(fieldId, `Field exceeds maximum length of ${maxlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            } else if (field.length \u003c minlength) {\n                                this.displayErrorMessages(fieldId, `Field is below minimum length of ${minlength}`, styles, classes, direct_style);\n                                is_error = true;\n                            }\n                        }\n                    }\n                    break;\n                default:\n                    break;\n            }\n        }\n        return !is_error;\n    }\n\n    clearErrorMessages() {\n        const errorMessages = document.querySelectorAll('.text-danger');\n        errorMessages.forEach(errorMessage =\u003e errorMessage.parentNode.removeChild(errorMessage));\n    }\n\n    displayErrorMessages(fieldId, errorMessage, styles = \"\", classes = \"\", direct_style = false) {\n        const errorContainer = document.createElement('div');\n        errorContainer.className = 'text-danger '.concat(classes);\n        if (!direct_style) {\n            errorContainer.style = 'position:absolute;font-size:13px;'.concat(styles);\n        } else {\n            errorContainer.style = styles\n        }\n        errorContainer.innerHTML = errorMessage;\n        const field = document.getElementById(fieldId);\n        field.parentNode.appendChild(errorContainer);\n    }\n}\n\n```\n\n\n## Usage\n\nHere’s an example of how you can use Js-Form-Validation in your project:\n\n```javascript\n$('#{{form_id}}').on('submit', async function (event) {\n    event.preventDefault();\n    const errorMessageDisplay = new ErrorMessageDisplay();\n    const errorMessages = [\n        {\n            \"fieldId\":\"field_id\",\n            \"errorMessage\": \"Field is required\",\n            \"type\": \"general\",\n            \"direct_style\": true, // if you want style directly\n            \"styles\": \"font-size:13px;\", // this is style part\n            \"classes\": \"float-start\" // you can style here \n        },\n        {\n            \"fieldId\":\"add-store-issue-packing-control\",\n            \"errorMessage\": \"Field is required\",\n            \"type\": \"general\", // email and phone number\n        }\n    ];\n    const isFormValid = errorMessageDisplay.validateForm(errorMessages);\n    if (isFormValid){\n    // Write your code\n  }\n});\n\n```\n\n\nIn this example:\n\n- Field Validation: You can define multiple fields to be validated, each with its own validation type and error message.\n\n- Customization: Apply custom styles or CSS classes to error messages for better UI integration.\n\n- Direct Style Application: You can choose to style error messages directly using the `direct_style` option.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhammedrahil%2Feasy-js-form-validation-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuhammedrahil%2Feasy-js-form-validation-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuhammedrahil%2Feasy-js-form-validation-module/lists"}