diff --git a/form-validator/index.html b/form-validator/index.html index f90e0f68..22ee95f5 100644 --- a/form-validator/index.html +++ b/form-validator/index.html @@ -1,44 +1,51 @@ - - - - - - Form Validator - - -
-
-

Register With Us

-
- - - Error message -
-
- - - Error message -
-
- - - Error message -
-
- - - Error message -
- -
+ + + + + + + Form Validator + + + +
+
+

Register With Us

+ +
+ + + Error message
- - - +
+ + + Error message +
+ +
+ + + + Error message +
+ +
+ + + + Error message +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/form-validator/script.js b/form-validator/script.js index 9e2a9043..7bd40028 100644 --- a/form-validator/script.js +++ b/form-validator/script.js @@ -60,11 +60,34 @@ function checkLength(input, min, max) { } } +// show and hide password +function hidePass() { + const buttons = document.querySelectorAll(".toggle-btn"); + + buttons.forEach(function(btn) { + btn.addEventListener("click", function() { + // Find the input before this button + const inputPass = btn.previousElementSibling; + + if (inputPass.type === "password") { + inputPass.type = "text"; + btn.textContent = "Hide"; + } else { + inputPass.type = "password"; + btn.textContent = "Show"; + } + }); + }); +} + +hidePass(); + // Check passwords match function checkPasswordsMatch(input1, input2) { if (input1.value !== input2.value) { showError(input2, 'Passwords do not match'); } + } // Get fieldname @@ -75,12 +98,28 @@ function getFieldName(input) { // 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); + + // Run all validations + checkRequired([username, email, password, password2]); + checkLength(username, 3, 15); + checkLength(password, 6, 25); + checkEmail(email); + checkPasswordsMatch(password, password2); + + // Check if there are any errors + const errors = document.querySelectorAll('.form-control.error'); + + if (errors.length === 0) { + // No errors - all validations passed! + const submit = document.getElementById("submit"); + submit.textContent = "Submitted successfully ✓"; + submit.style.backgroundColor = "green"; + + // Optional: Reset form after 2 seconds + setTimeout(function() { + form.reset(); + submit.textContent = "Submit"; + submit.style.backgroundColor = ""; // Reset to original color + }, 2000); } - -}); +}); \ No newline at end of file diff --git a/form-validator/style.css b/form-validator/style.css index 8e04ac47..c09a799b 100644 --- a/form-validator/style.css +++ b/form-validator/style.css @@ -32,7 +32,8 @@ h2 { } .form { - padding: 30px 40px; + padding: 10px 10px; + } .form-control { @@ -41,6 +42,8 @@ h2 { position: relative; } + + .form-control label { color: #777; display: block; @@ -54,6 +57,23 @@ h2 { width: 100%; padding: 10px; font-size: 14px; + position: relative; +} + +.form-control .toggle-btn { + position: absolute; + right: 5px; + top: 32%; + + transform: translateY(-50%); + background: transparent; + border: none; + cursor: pointer; + padding: 5px 10px; + color: black; + + font-size: 11px; + width: 12%; } .form-control input:focus { @@ -92,4 +112,4 @@ h2 { padding: 10px; margin-top: 20px; width: 100%; -} +} \ No newline at end of file