From 67f10cebfc9912c8a405b4f167e307e4abb8ac74 Mon Sep 17 00:00:00 2001
From: Iqbal <iqbalkhowarizmi@ymail.com>
Date: Thu, 5 Oct 2017 20:31:05 +0700
Subject: [PATCH] Added some validity interface. Functionality is not done yet.
---
src/view/register.html | 14 ++++++-------
src/view/script.js | 45 +++++++++++++++++++++++++++++++++++++++++-
src/view/style.css | 6 +++++-
3 files changed, 56 insertions(+), 9 deletions(-)
diff --git a/src/view/register.html b/src/view/register.html
index 00b15d4..c8c6c82 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 56adad5..e123e76 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 ad7746f..26a7696 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;
--
GitLab