From f7bf6d03687a2aec1bd8cf43b0e51bc5a9f4ae70 Mon Sep 17 00:00:00 2001 From: Sanjay K C Date: Sun, 17 Aug 2025 07:41:17 +0530 Subject: [PATCH] Delete form-validator directory --- form-validator/index.html | 44 ------------------ form-validator/readme.md | 12 ----- form-validator/script.js | 86 ----------------------------------- form-validator/style.css | 95 --------------------------------------- 4 files changed, 237 deletions(-) delete mode 100644 form-validator/index.html delete mode 100644 form-validator/readme.md delete mode 100644 form-validator/script.js delete mode 100644 form-validator/style.css diff --git a/form-validator/index.html b/form-validator/index.html deleted file mode 100644 index f90e0f68..00000000 --- a/form-validator/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Form Validator - - -
-
-

Register With Us

-
- - - Error message -
-
- - - Error message -
-
- - - Error message -
-
- - - Error message -
- -
-
- - - - diff --git a/form-validator/readme.md b/form-validator/readme.md deleted file mode 100644 index c6c95908..00000000 --- a/form-validator/readme.md +++ /dev/null @@ -1,12 +0,0 @@ -## Form Validator (Intro Project) - -Simple client side form validation. Check required, length, email and password match - -## Project Specifications - -- Create form UI -- Show error messages under specific inputs -- checkRequired() to accept array of inputs -- checkLength() to check min and max length -- checkEmail() to validate email with regex -- checkPasswordsMatch() to match confirm password diff --git a/form-validator/script.js b/form-validator/script.js deleted file mode 100644 index 9e2a9043..00000000 --- a/form-validator/script.js +++ /dev/null @@ -1,86 +0,0 @@ -const form = document.getElementById('form'); -const username = document.getElementById('username'); -const email = document.getElementById('email'); -const password = document.getElementById('password'); -const password2 = document.getElementById('password2'); - -// Show input error message -function showError(input, message) { - const formControl = input.parentElement; - formControl.className = 'form-control error'; - const small = formControl.querySelector('small'); - small.innerText = message; -} - -// Show success outline -function showSuccess(input) { - const formControl = input.parentElement; - formControl.className = 'form-control success'; -} - -// Check email is valid -function checkEmail(input) { - const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - if (re.test(input.value.trim())) { - showSuccess(input); - } else { - showError(input, 'Email is not valid'); - } -} - -// Check required fields -function checkRequired(inputArr) { - let isRequired = false; - inputArr.forEach(function(input) { - if (input.value.trim() === '') { - showError(input, `${getFieldName(input)} is required`); - isRequired = true; - } else { - showSuccess(input); - } - }); - - return isRequired; -} - -// Check input length -function checkLength(input, min, max) { - if (input.value.length < min) { - showError( - input, - `${getFieldName(input)} must be at least ${min} characters` - ); - } else if (input.value.length > max) { - showError( - input, - `${getFieldName(input)} must be less than ${max} characters` - ); - } else { - showSuccess(input); - } -} - -// Check passwords match -function checkPasswordsMatch(input1, input2) { - if (input1.value !== input2.value) { - showError(input2, 'Passwords do not match'); - } -} - -// Get fieldname -function getFieldName(input) { - return input.id.charAt(0).toUpperCase() + input.id.slice(1); -} - -// Event listeners -form.addEventListener('submit', function(e) { - e.preventDefault(); - - if(checkRequired([username, email, password, password2])){ - checkLength(username, 3, 15); - checkLength(password, 6, 25); - checkEmail(email); - checkPasswordsMatch(password, password2); - } - -}); diff --git a/form-validator/style.css b/form-validator/style.css deleted file mode 100644 index 8e04ac47..00000000 --- a/form-validator/style.css +++ /dev/null @@ -1,95 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); - -:root { - --success-color: #2ecc71; - --error-color: #e74c3c; -} - -* { - box-sizing: border-box; -} - -body { - background-color: #f9fafb; - font-family: 'Open Sans', sans-serif; - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - margin: 0; -} - -.container { - background-color: #fff; - border-radius: 5px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); - width: 400px; -} - -h2 { - text-align: center; - margin: 0 0 20px; -} - -.form { - padding: 30px 40px; -} - -.form-control { - margin-bottom: 10px; - padding-bottom: 20px; - position: relative; -} - -.form-control label { - color: #777; - display: block; - margin-bottom: 5px; -} - -.form-control input { - border: 2px solid #f0f0f0; - border-radius: 4px; - display: block; - width: 100%; - padding: 10px; - font-size: 14px; -} - -.form-control input:focus { - outline: 0; - border-color: #777; -} - -.form-control.success input { - border-color: var(--success-color); -} - -.form-control.error input { - border-color: var(--error-color); -} - -.form-control small { - color: var(--error-color); - position: absolute; - bottom: 0; - left: 0; - visibility: hidden; -} - -.form-control.error small { - visibility: visible; -} - -.form button { - cursor: pointer; - background-color: #3498db; - border: 2px solid #3498db; - border-radius: 4px; - color: #fff; - display: block; - font-size: 16px; - padding: 10px; - margin-top: 20px; - width: 100%; -}