Fixed bugs in script and styles.

public/scripts.js

+function checkAvailability(string, elmtID, dataCollection) {
+    var field = document.getElementById(elmtID);
+
+    if (string.length === 0) {
+        field.classList.remove("available");
+        field.classList.remove("unavailable");
+        return;
+    } else {
+        var xmlhttp = new XMLHttpRequest();
+        xmlhttp.onreadystatechange = function () {
+            if (this.readyState === 4 && this.status === 200) {
+                if (this.responseText === "available") {
+                    field.classList.remove("unavailable");
+                    field.classList.add("available");
+                } else {
+                    field.classList.remove("available");
+                    field.classList.add("unavailable");
+                }
+            }
+        };
+        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");
+        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;
+var isUsernameAvailable = false;
+var isEmailAvailable = false;
+
+
+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");
+        isPasswordMatch = false;
+    } else {
+        confirmField.classList.remove("not-match");
+        passwordField.classList.remove("not-match");
+        isPasswordMatch = true;
+    }
+};
+
+
+document.getElementById("name").onkeyup = function () {
+    isNameFilled = checkRequiredField("name");
+};
+
+document.getElementById("username").onkeyup = function () {
+    isUsernameFilled = checkRequiredField("username");
+    checkAvailability(this.value, "username", '/index.php/register/validate/username');
+    isUsernameAvailable = this.classList.contains("available");
+};
+
+document.getElementById("password").onkeyup = function () {
+    isPasswordFilled = checkRequiredField("password");
+};
+
+document.getElementById("email").onkeyup = function () {
+    isEmailFilled = checkRequiredField("email");
+    checkAvailability(this.value, "email", '/index.php/register/validate/email');
+    isEmailAvailable = this.classList.contains("available");
+};
+
+document.getElementById("phone").onkeyup = function () {
+    isPhoneFilled = checkRequiredField("phone");
+};
+
+document.getElementById("register-form").onkeyup = function () {
+    var submitBtn = document.getElementById("sign-up-btn");
+
+    if (isNameFilled &&
+        isUsernameFilled &&
+        isPasswordFilled &&
+        isEmailFilled &&
+        isPhoneFilled &&
+        isPasswordMatch &&
+        isUsernameAvailable &&
+        isEmailAvailable) {
+        submitBtn.removeAttribute("disabled");
+    } else {
+        submitBtn.setAttribute("disabled", "true");
+    }
+};
\ No newline at end of file

public/style.css

@@ -216,4 +216,20 @@ table, th, td {
     width: 17px;
     height: 17px;
     content: "";
+}
+
+/* Register Page */
+
+
+
+.available {
+    background-color: greenyellow;
+}
+
+.unavailable, .empty-required, .not-match {
+    background-color: orangered;
+}
+
+.not-match::-webkit-input-placeholder, .empty-required::-webkit-input-placeholder, .unavailable::-webkit-input-placeholder {
+    color: whitesmoke;
 }
\ No newline at end of file