diff --git a/src/view/register.html b/src/view/register.html index 00b15d41614a9e3fc6e698e26db6047901fa8dcb..c8c6c821e9749bfc93a26ffc3aaf62ba6a9406a3 100644 --- a/src/view/register.html +++ b/src/view/register.html @@ -19,7 +19,7 @@ <section id="register-main"> <div id="register-panel"> - <form> + <form name="registerForm" method="post" action="../controller/RegisterController.php"> <fieldset> <legend>Sign Up</legend> <table> @@ -28,7 +28,7 @@ Name: </td> <td> - <input type="text" placeholder="Your name" name="name"> + <input type="text" placeholder="Your name" id="name" name="name"> </td> </tr> <tr> @@ -52,7 +52,7 @@ Password: </td> <td> - <input type="password" placeholder="Password" name="password"> + <input type="password" placeholder="Password" id="password" name="password"> </td> </tr> <tr> @@ -60,7 +60,7 @@ Confirm Password: </td> <td> - <input type="password" placeholder="Confirm password" name="confirm-password"> + <input type="password" placeholder="Confirm password" id="confirm-password" name="confirm-password"> </td> </tr> <tr> @@ -68,13 +68,13 @@ Phone Number: </td> <td> - <input type="number" placeholder="Phone number" name="phone-number"> + <input type="number" placeholder="Phone number" id="phone" name="phone"> </td> </tr> </table> - <input type="checkbox" value="is-driver"> I want to be a driver as well! + <input type="checkbox" value="is-driver" name="is_driver"> I want to be a driver as well! <br> - <input type="submit" value="Login"> + <input type="submit" value="Sign up" disabled> <br> </fieldset> </form> diff --git a/src/view/script.js b/src/view/script.js index 56adad54484103c81903dad27fbd0cbfd654065e..e123e76991bfb207c9f4f47bee39fc7daadc9b99 100644 --- a/src/view/script.js +++ b/src/view/script.js @@ -1,5 +1,5 @@ function checkAvailability(string, elmtID, dataCollection) { - var field = document.getElementById(elmtID) + var field = document.getElementById(elmtID); if (string.length === 0) { field.classList.remove("available"); @@ -21,4 +21,47 @@ function checkAvailability(string, elmtID, dataCollection) { xmlhttp.open("GET", dataCollection + "?q=" + string, true); xmlhttp.send(); } +} + +function checkRequiredField(elmtID) { + var field = document.getElementById(elmtID); + + if (field.value === "") { + field.classList.add("empty-required"); + } else { + field.classList.remove("empty-required"); + } +} + +document.getElementById("confirm-password").onkeyup = function () { + var confirmField = document.getElementById("confirm-password"); + var passwordField = document.getElementById("password"); + + if (confirmField.value !== passwordField.value) { + confirmField.classList.add("not-match"); + passwordField.classList.add("not-match"); + } else { + confirmField.classList.remove("not-match"); + passwordField.classList.remove("not-match"); + } +}; + +document.getElementById("name").onkeyup = function () { + checkRequiredField("name"); +}; + +document.getElementById("username").onkeyup = function () { + checkRequiredField("username"); +}; + +document.getElementById("password").onkeyup = function () { + checkRequiredField("password"); +}; + +document.getElementById("email").onkeyup = function () { + checkRequiredField("email"); +}; + +document.getElementById("phone").onkeyup = function () { + checkRequiredField("phone"); } \ No newline at end of file diff --git a/src/view/style.css b/src/view/style.css index ad7746f806be6eb88714769a2247fdeba2ba5fad..26a76968eaa8ba8b31f1bae61e4e04505ab45e62 100644 --- a/src/view/style.css +++ b/src/view/style.css @@ -26,10 +26,14 @@ background-color: greenyellow; } -.unavailable { +.unavailable, .empty-required, .not-match { background-color: orangered; } +.not-match::-webkit-input-placeholder, .empty-required::-webkit-input-placeholder, .unavailable::-webkit-input-placeholder { + color: whitesmoke; +} + input { margin-top: 5px; margin-bottom: 5px;