diff --git a/src/view/register.html b/src/view/register.html index c8c6c821e9749bfc93a26ffc3aaf62ba6a9406a3..4e51a2f1f34dfd4bd6a12aef8cb2f2ab6f0aadd0 100644 --- a/src/view/register.html +++ b/src/view/register.html @@ -19,7 +19,7 @@ <section id="register-main"> <div id="register-panel"> - <form name="registerForm" method="post" action="../controller/RegisterController.php"> + <form id="register-form" name="registerForm" method="post" action="../controller/RegisterController.php"> <fieldset> <legend>Sign Up</legend> <table> @@ -74,7 +74,7 @@ </table> <input type="checkbox" value="is-driver" name="is_driver"> I want to be a driver as well! <br> - <input type="submit" value="Sign up" disabled> + <input id="sign-up-btn" type="submit" value="Sign up" disabled> <br> </fieldset> </form> diff --git a/src/view/script.js b/src/view/script.js index e123e76991bfb207c9f4f47bee39fc7daadc9b99..ab16c24a97abccaa1c7ca41386258175781d57ea 100644 --- a/src/view/script.js +++ b/src/view/script.js @@ -28,11 +28,20 @@ function checkRequiredField(elmtID) { if (field.value === "") { field.classList.add("empty-required"); + return false; } else { field.classList.remove("empty-required"); + return true; } } +var isNameFilled = false; +var isUsernameFilled = false; +var isPasswordFilled = false; +var isEmailFilled = false; +var isPhoneFilled = false; +var isPasswordMatch = false; + document.getElementById("confirm-password").onkeyup = function () { var confirmField = document.getElementById("confirm-password"); var passwordField = document.getElementById("password"); @@ -40,28 +49,46 @@ document.getElementById("confirm-password").onkeyup = function () { if (confirmField.value !== passwordField.value) { confirmField.classList.add("not-match"); passwordField.classList.add("not-match"); + isPasswordMatch = false; } else { confirmField.classList.remove("not-match"); passwordField.classList.remove("not-match"); + isPasswordMatch = true; } }; + document.getElementById("name").onkeyup = function () { - checkRequiredField("name"); + isNameFilled = checkRequiredField("name"); }; document.getElementById("username").onkeyup = function () { - checkRequiredField("username"); + isUsernameFilled = checkRequiredField("username"); }; document.getElementById("password").onkeyup = function () { - checkRequiredField("password"); + isPasswordFilled = checkRequiredField("password"); }; document.getElementById("email").onkeyup = function () { - checkRequiredField("email"); + isEmailFilled = checkRequiredField("email"); }; document.getElementById("phone").onkeyup = function () { - checkRequiredField("phone"); + isPhoneFilled = checkRequiredField("phone"); +}; + +document.getElementById("register-form").onkeyup = function () { + var submitBtn = document.getElementById("sign-up-btn"); + + if (isNameFilled && + isUsernameFilled && + isPasswordFilled && + isEmailFilled && + isPhoneFilled && + isPasswordMatch) { + submitBtn.removeAttribute("disabled"); + } else { + submitBtn.setAttribute("disabled", "true"); + } } \ No newline at end of file