Added some validity interface. Functionality is not done yet.

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>

src/view/script.js

 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

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;