From 95c871a02b9684c52e554a2b05aee8c41ade3741 Mon Sep 17 00:00:00 2001
From: Iqbal <iqbalkhowarizmi@ymail.com>
Date: Thu, 5 Oct 2017 21:21:36 +0700
Subject: [PATCH] Added some validation mechanism.
---
src/view/register.html | 4 ++--
src/view/script.js | 37 ++++++++++++++++++++++++++++++++-----
2 files changed, 34 insertions(+), 7 deletions(-)
diff --git a/src/view/register.html b/src/view/register.html
index c8c6c82..4e51a2f 100644
--- a/src/view/register.html
+++ b/src/view/register.html
@@ -19,7 +19,7 @@
<section id="register-main">
<div id="register-panel">
- <form name="registerForm" method="post" action="../controller/RegisterController.php">
+ <form id="register-form" name="registerForm" method="post" action="../controller/RegisterController.php">
<fieldset>
<legend>Sign Up</legend>
<table>
@@ -74,7 +74,7 @@
</table>
<input type="checkbox" value="is-driver" name="is_driver"> I want to be a driver as well!
<br>
- <input type="submit" value="Sign up" disabled>
+ <input id="sign-up-btn" type="submit" value="Sign up" disabled>
<br>
</fieldset>
</form>
diff --git a/src/view/script.js b/src/view/script.js
index e123e76..ab16c24 100644
--- a/src/view/script.js
+++ b/src/view/script.js
@@ -28,11 +28,20 @@ function checkRequiredField(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;
+
document.getElementById("confirm-password").onkeyup = function () {
var confirmField = document.getElementById("confirm-password");
var passwordField = document.getElementById("password");
@@ -40,28 +49,46 @@ document.getElementById("confirm-password").onkeyup = function () {
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 () {
- checkRequiredField("name");
+ isNameFilled = checkRequiredField("name");
};
document.getElementById("username").onkeyup = function () {
- checkRequiredField("username");
+ isUsernameFilled = checkRequiredField("username");
};
document.getElementById("password").onkeyup = function () {
- checkRequiredField("password");
+ isPasswordFilled = checkRequiredField("password");
};
document.getElementById("email").onkeyup = function () {
- checkRequiredField("email");
+ isEmailFilled = checkRequiredField("email");
};
document.getElementById("phone").onkeyup = function () {
- checkRequiredField("phone");
+ isPhoneFilled = checkRequiredField("phone");
+};
+
+document.getElementById("register-form").onkeyup = function () {
+ var submitBtn = document.getElementById("sign-up-btn");
+
+ if (isNameFilled &&
+ isUsernameFilled &&
+ isPasswordFilled &&
+ isEmailFilled &&
+ isPhoneFilled &&
+ isPasswordMatch) {
+ submitBtn.removeAttribute("disabled");
+ } else {
+ submitBtn.setAttribute("disabled", "true");
+ }
}
\ No newline at end of file
--
GitLab