Skip to content
Snippets Groups Projects
Commit 7ac4e7d6 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Client Side Javascript balidation for forms

parent 96fd065d
No related branches found
No related tags found
1 merge request!37Resolve "As a repeat trail visitor , I want to be able to create an account so I can save and review my progress."
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/scripts/login.js
+ 63
− 74
View file @ 7ac4e7d6
/*let username = document.forms["loginForm"]["username"];
let password = document.forms["loginForm"]["password"];
let pattern = new RegExp("^[a-z0-9_-]{3,15}$");
username.addEventListener("input", validateUsername)
password.addEventListener("input", validatePassword)
function validateUsername() {
if (!(username.value === "") && pattern.test(username.value)){
username.classList.remove("invalid-field");
username.classList.add("valid-field");
document.getElementById(username.name+"Invalid").style.opacity = 0;
username.style.borderColor = "green";
return true;
} else if( ! (username.classList.contains("invalid-field") ) ){
username.classList.add("invalid-field");
username.classList.remove("valid-field");
document.getElementById(username.name+"Invalid").style.opacity = 1;
username.style.borderColor = "red";
}
return false;
}
function validatePassword(){
if (password.value === "") {
password.classList.add("invalid-field");
password.classList.remove("valid-field");
document.getElementById(password.name+"Invalid").style.opacity = 1;
password.style.borderColor = "red";
return false;
} else if( ! (password.classList.contains("valid-field") ) ) {
password.classList.remove("invalid-field");
password.classList.add("valid-field");
document.getElementById(password.name+"Invalid").style.opacity = 0;
password.style.borderColor = "green";
}
return true;
}
function validateForm(){
if (validateUsername() & validatePassword()) { //Using just & so it checks both, even if the first is false (it applies the style)
console.log("VALID");
return false;
} else {
console.log("Invalid");
document.getElementById("invalidLogin").style.opacity = 1;
return false;
}
//TODO SERVER SIDE VALIDATION AND CHECK AGAINST USERS DB TABLE
}*/
/*
function createAccountPOST(){
let data = { username: username.value, password: password.value}
console.log(username.value);
console.log(password.value);
$.ajax
({
type: "POST",
url: "http://localhost:8080/login/register",
dataType: 'json',
data: JSON.stringify(data),
success: function (){
console.log('Success');
},
error: function (request, status, error) {
console.log("ERROR");
console.log(request);
console.log(status);
console.log(error);
}
});
return false;
}*/
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
......@@ -81,4 +8,66 @@ registerBtn.addEventListener('click', () => {
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
\ No newline at end of file
});
const emailRegEx = new RegExp(/^[A-Za-z0-9.-_]+@[A-Za-z0-9.-]+\.[A-Za-z]+$/m);
const passwordRegEx = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+$/m);
const usernameRegEx = new RegExp(/^[A-Za-z ]+$/m);
function loginFormValidation(){
let pass= true;
let email = $("#login-email").val();
let password = $("#login-password").val();
if (email === "") {
alert("Email cannot be empty");
pass = false;
} else if ( !(emailRegEx.test(email)) ) {
pass = false;
alert("Invalid Email address")
}
if (password === "") {
alert("Password cannot be empty");
pass = false;
} else if ( !(passwordRegEx.test(password)) ) {
pass = false;
alert("Password contains invalid characters");
}
return pass;
}
function registerFormValidation(){
/*WHYTF THIS DONT WORK*/
let pass=true;
let email = $("#register-email").val();
let username = $("#register-username").val();
let password = $("#register-password").val();
if (email == "") {
console.log("Email empty bit")
pass = false;
alert("Email cannot be empty");
} else if ( !(emailRegEx.test(email)) ) {
console.log("Email no match")
pass = false;
alert("Invalid Email address");
}
if (username == "") {
pass = false;
alert("Username cannot be empty")
} else if ( !(usernameRegEx.test(username)) ) {
console.log(!usernameRegEx.test(username));
pass = false;
alert("Invalid username");
}
if (password == "") {
pass = false;
alert("Password cannot be empty");
} else if ( !(passwordRegEx.test(password)) ) {
pass = false;
alert("Password contains invalid characters");
}
return pass;
}
\ No newline at end of file
src/main/resources/templates/users/login.html
+ 8
− 8
View file @ 7ac4e7d6
......@@ -14,32 +14,32 @@
</header>
<main>
<!--CODE FROM: https://www.youtube.com/watch?v=PlpM2LJWu-s&t=928s -->
<!--CODE MODIFIED FROM: https://github.com/AsmrProg-YT/Modern-Login -->
<div class="container sign-in">
<div class="container" id="container">
<div class="form-container sign-up">
<form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="">
<form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="return registerFormValidation()">
<h1>Create Account</h1>
<label>
<input class="input" th:field="*{name}" type="text" placeholder="Name">
<input class="input" th:field="*{name}" id="register-username" type="text" placeholder="Name">
</label>
<label>
<input class="input" th:field="*{email}" type="email" placeholder="Email">
<input class="input" th:field="*{email}" id="register-email" type="email" placeholder="Email">
</label>
<label>
<input class="input" th:field="*{password}" type="password" placeholder="Password">
<input class="input" th:field="*{password}" id="register-password" type="password" placeholder="Password">
</label>
<button type="submit" >Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="">
<form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="return loginFormValidation()">
<h1>Sign In</h1>
<label>
<input class="input" th:field="*{email}" type="email" placeholder="Email">
<input class="input" th:field="*{email}" id="login-email" type="email" placeholder="Email">
</label>
<label>
<input class="input" th:field="*{password}" type="password" placeholder="Password">
<input class="input" th:field="*{password}" id="login-password" type="password" placeholder="Password">
</label>
<a href="#" class="text">Forget Your Password?</a>
<button type="submit">Sign In</button>
......
src/main/resources/templates/users/register.html deleted 100644 → 0
+ 0
− 37
View file @ 96fd065d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<main>
<div class="container sign-in">
<form action="#" th:action="@{/login/register}" method="post" name="loginForm" th:object="${user}">
<h2>Log In</h2>
<div class="label">
<label for="username"><b>Username</b><br></label>
<div th:style="${#fields.hasErrors('name') ? 'opacity: 1;' : 'opacity: 0;'}" id="usernameInvalid" class="invalid-tooltip">Please fill out this field.</div>
</div>
<input type="text" name="username" id="username" th:field="*{name}" placeholder="Enter Username" title="Username Input">
<div class="label">
<label for="password"><b>Password</b><br></label>
<div th:style="${#fields.hasErrors('password') ? 'opacity: 1;' : 'opacity: 0;'}" id="passwordInvalid" class="invalid-tooltip">Please fill out this field.</div>
</div>
<input type="password" id="password" name="password" th:field="*{password}">
<div id="invalidLogin">Username and/or Password incorrect. Please try again.</div>
<button type="submit" ><b>Log In</b></button>
</form>
</div>
<div class="container sign-up"></div>
</main>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment