From b87ed834f0610d8e8d8c116bbccf8018116cbd7e Mon Sep 17 00:00:00 2001 From: ianmuchyri Date: Fri, 24 Nov 2023 14:55:45 +0300 Subject: [PATCH 01/11] add validation errors to js Signed-off-by: ianmuchyri --- ui/web/static/js/clipboard.js | 91 +++++++++++++++++++++++++++++++++++ ui/web/template/users.html | 29 ++++++++--- 2 files changed, 114 insertions(+), 6 deletions(-) diff --git a/ui/web/static/js/clipboard.js b/ui/web/static/js/clipboard.js index 4d7b5000..dd876880 100644 --- a/ui/web/static/js/clipboard.js +++ b/ui/web/static/js/clipboard.js @@ -21,3 +21,94 @@ function copyToClipboard(button) { }, ); } + +// Form validation functions + +function validateName(name, errorDiv, event) { + removeErrorMessage(errorDiv); + if (name.trim() === "") { + event.preventDefault(); + displayErrorMessage("Name is Required", errorDiv); + } +} + +const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; +function validateEmail(email, errorDiv, event) { + removeErrorMessage(errorDiv); + if (email.trim() === "") { + event.preventDefault(); + displayErrorMessage("Email is Required", errorDiv); + } else if (!email.match(emailRegex)) { + event.preventDefault(); + displayErrorMessage("Invalid email format", errorDiv); + } +} + +const minLength = 8; +function validatePassword(password, errorDiv, event) { + removeErrorMessage(errorDiv); + if (password.trim().length < minLength) { + event.preventDefault(); + var errorMessage = `Password must be at least ${minLength} characters long`; + displayErrorMessage(errorMessage, errorDiv); + } +} + +function validateMetadata(metadata, errorDiv, event) { + removeErrorMessage(errorDiv); + try { + if (metadata.trim() !== "") { + JSON.parse(metadata); + } + } catch (error) { + event.preventDefault(); + displayErrorMessage("Metadata is not a valid JSON object", errorDiv); + } +} + +function validateTags(tags, errorDiv, event) { + removeErrorMessage(errorDiv); + var tagsArray; + try { + if (tags.trim() !== "") { + tagsArray = JSON.parse(tags); + } + } catch (error) { + event.preventDefault(); + displayErrorMessage("tags must be a string array", errorDiv); + } + if ( + !Array.isArray(tagsArray) || + !tagsArray.every(function (tag) { + return typeof tag === "string"; + }) + ) { + event.preventDefault(); + displayErrorMessage("tags must be strings", errorDiv); + } +} + +function displayErrorMessage(errorMessage, divName) { + const errorDiv = document.getElementById(divName); + errorDiv.style.display = "block"; + errorDiv.innerHTML = errorMessage; +} + +function removeErrorMessage(divName) { + const errorDiv = document.getElementById(divName); + errorDiv.style.display = "none"; +} + +function attachValidationListener(config) { + const button = document.getElementById(config.buttonId); + + button.addEventListener("click", function (event) { + for (const key in config.validations) { + if (config.validations.hasOwnProperty(key)) { + const validationFunc = config.validations[key]; + const elementValue = document.getElementById(key).value; + validationFunc(elementValue, config.errorDivs[key], event); + } + } + }); +} diff --git a/ui/web/template/users.html b/ui/web/template/users.html index d03e2d25..26db5a8c 100644 --- a/ui/web/template/users.html +++ b/ui/web/template/users.html @@ -47,8 +47,8 @@