validating username and email done (register)

controller/register.php

+<?php
+//TODO : Setelah submit redirect ke dashboard, checking user n email
+
+//model
+include "../model/user.php";
+
+if(isset($_POST["username2check"])) {
+    $user = new User;
+    $username = $_POST["username2check"];
+    $sqlcheck = $user->getUsername($username);
+    $usernameCheck = mysqli_num_rows($sqlcheck);
+    if($usernameCheck < 1) {
+        echo 'ok';
+        exit();
+    } else {
+        echo 'no';
+        exit();
+    }
+}
+
+if(isset($_POST["email2check"])) {
+    $user = new User;
+    $email = $_POST["email2check"];
+    $sqlcheck = $user->getEmail($email);
+    $usernameCheck = mysqli_num_rows($sqlcheck);
+
+    if($usernameCheck < 1) {
+        echo 'ok';
+        exit();
+    } else {
+        echo 'no';
+        exit();
+    }
+}
+
+if(isset($_POST["register"])) {
+    $user = new User;
+    $name = $_POST['full-name'];
+    $username = $_POST['username'];
+    $email = $_POST['email'];
+    $password = $_POST['password'];
+    $confirmpass = $_POST['confirm-password'];
+    $phone  = $_POST['phone'];
+    $isDriver = 0;
+    if(isset($_POST['is-driver'])) {
+        if($_POST['is-driver'] == 'on') {
+            $isDriver = 1;
+        }
+    }
+    $user -> createProfile($name,$username,$email,$password,$phone,$isDriver);
+}

css/register.css

@@ -64,11 +64,12 @@
 
 .check-icon {
     width: 13px;
+    display : none;
 }
 
 .delete-icon {
     width: 13px;
-    display: none;
+    display: inline-block;
 }
 
 .checkbox {

js/register.js

+function checkUsername() {
+    var u = document.getElementById("username").value;
+    if(u != "") {
+        var hr = new XMLHttpRequest();
+        hr.open("POST", "../controller/register.php", true);
+        hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+        hr.onreadystatechange = function () {
+            if(hr.readyState == 4 && hr.status == 200) {
+                var response = hr.responseText;
+                if(response == 'ok') {
+                    document.getElementById("check-icon-username").style.display = 'inline-block';
+                    document.getElementById("delete-icon-username").style.display = 'none';
+                }
+                if(response == 'no') {
+                    document.getElementById("check-icon-username").style.display = 'none';
+                    document.getElementById("delete-icon-username").style.display = 'inline-block';
+                }
+            }
+        }
+        var v = "username2check=" + u;
+        hr.send(v);
+    }
+}
+
+function checkEmail() {
+    var email = document.getElementById("email").value;
+    if(email != "") {
+        var hr = new XMLHttpRequest();
+        hr.open("POST", "../controller/register.php", true);
+        hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+        var regex = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]){2,4}$/;
+        hr.onreadystatechange = function () {
+            var response = hr.responseText;
+            if(response == 'ok' && regex.test(email) != false) {
+                document.getElementById("check-icon-email").style.display = 'inline-block';
+                document.getElementById("delete-icon-email").style.display = 'none';
+            }
+            if(response == 'no' || regex.test(email) == false) {
+                document.getElementById("check-icon-email").style.display = 'none';
+                document.getElementById("delete-icon-email").style.display = 'inline-block';
+            }
+        }
+        var v = "email2check=" + email;
+        hr.send(v);
+    }
+}
+
+

view/register.php

@@ -19,20 +19,25 @@
                 <form action="../controller/register.php" method="post">
                     <div class="user-input">
                         <div class="label-input">Your Name</label></div>
-                        <div class="text-input"><input type="text" name="full-name"></div>
+                        <div class="text-input"><input type="text" name="full-name" id="full-name"></div>
                     </div>
                     <div class="user-input">
                         <div class="label-input">Username</label></div>
-                        <div class="text-input-with-check"><input type="text" name="username"></div>
-                        <img id="username-status"></img>
-                        <div><img src="../img/check.png" class="check-icon"></div>
-                        <div><img src="../img/delete.png" class="delete-icon"></div>
+                        <div class="text-input-with-check"><input type="text" name="username" id="username"
+                                                                  onchange="checkUsername()">
+                        </div>
+                        <span id="username-status"></span>
+                        <div><img src="../img/check.png" class="check-icon" id="check-icon-username"></div>
+                        <div><img src="../img/delete.png" class="delete-icon" id="delete-icon-username"></div>
                     </div>
                     <div class="user-input">
                         <div class="label-input">Email</label></div>
-                        <div class="text-input-with-check"><input type="text" name="email"></div>
-                        <div><img src="../img/check.png" class="check-icon"></div>
-                        <div><img src="../img/delete.png" class="delete-icon"></div>
+                        <div class="text-input-with-check"><input type="text" name="email" id="email"
+                                                                  onchange="checkEmail()">
+                        </div>
+                        <span id="email-status"></span>
+                        <div><img src="../img/check.png" class="check-icon" id="check-icon-email"></div>
+                        <div><img src="../img/delete.png" class="delete-icon" id="delete-icon-email"></div>
                     </div>
                     <div class="user-input">
                         <div class="label-input">Password</label></div>