I am trying to write a html/js script to validate a simple login page and on successful login, to redirect to the homepage. What I have so far is not doing the intended when I hit the submit button. Can someone please help? It is much appreciated. My code is:
<!doctype html>
<!-- This is is the main start page saved in index.html -->
<html lang="en-US">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Login details</h2>
<form name="login" action="return validateForm()" action="http://localhost:8080/index.html" method="post">
<fieldset>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<script>
function validateForm() {
var un = document.login.username.value;
var pw = document.login.password.value;
var username = "username"
var password = "password"
if ((un == username) && (pw == password)) {
return true;
}
else {
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>
With the input from Don't Panic and Ahmed I have corrected the code:
<!doctype html>
<!-- This is is the main start page saved in index.html -->
<html lang="en-US">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Login details</h2>
<form name="login" onsubmit="return validateFormOnSubmit()" action="http://localhost:8080/index.html" method="post">
<fieldset>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<script>
function validateFormOnSubmit() {
var un = document.login.username.value;
var pw = document.login.password.value;
var username = "username"
var password = "password"
if ((un == username) && (pw == password)) {
return true;
}
else {
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>
Related
So just starting coding in html and js, need some help as to why the page isn't redirecting after validation. The page just resets after logging in, and i'm trying to get it to redirect to login.html. Any help please?
DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Task Manager</title>
<link rel="stylesheet" href="style.css">
<script src ="login.js"> </script>
</head>
<body>
<div class="center">
<h1>Task Manager</h1>
<form method="post">
<div class="txt_field">
<input type="text" required name="" id="username">
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" name="" id="password">
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password?</div>
<input type="submit" name="" value="Login" onclick="validate()">
<div class="signup_link">
Not a member? Signup
</div>
</form>
</div>
</body>
</html>
Javascript:
function validate()
{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=="admin"&& password=="user")
{
alert("login succesfully");
window.location.href = "./todo.html";
return false;
}
else
{
alert("login failed");
return false;
}
}
Your problem is in the java script in the return part so I don't remember exactly how to end the redirect in true
You can change
window.location.href = "./todo.html";
to
window.location = "./todo.html";
When you click the login button after you enter the correct username and password, it is supposed to redirect you. I posted the same question yesterday, but now I have slightly changed the code like some of the answers said, but it still hasn't worked. Please help.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="submit" value="Login" id="submit" onclick="validate()"/>
</form>
<b><i>Submit</i></b>
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3;
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Joshua" && password == "Joshua#123"){
alert ("Login successfully");
window.location.replace("https://www.youtube.com"); // Redirecting to other page.
}
else{
attempt -= 1;// Decrementing by one.
alert("Incorrect username or password")
alert("You have "+attempt+" attempt(s) left;");
// Disabling fields after 3 attempts.
if( attempt == 0){
alert("Incorrect username or password")
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
});
</script>
<script src="js/login.js"></script>
</body>
</html>
you have to prevent the default behavior of Submitting, and once you do that- you can redirect.
$("form").submit(function(event){ //edited
event.preventDefault()
..your code here
});
While creating login form to welcome page in HTML, CSS, js the problem faced is the return statement is not working.
create code for HTML inbuilt javascript.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="user name">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var user name= document.getElementById("user name").value;
var password= document.getElementById("password").Value;
if(user name.value=="dr" && password.value=="8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>
Using return false statement it should stop entering into welcome page, but in this code it's not working, it goes to next page.
Tried that onsubmit="return false; validate();" while using this code entire block gets stop & won't enter to welcome page.
You are using spaces in your id attribute which is incorrect, the id attribute must not have anykind of spaces. Plus, you are missing id="submit" on the submit button. In your code the JS is unable to execute this line
document.getElementById("submit").disabled = true;
Because the submit button doesn't have any ID.
Below has the errors fixed. This should work
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login" id="submit"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var username= document.getElementById("username").value;
var password= document.getElementById("password").Value;
if(username == "dr" && password == "8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>
The problem was that id was missing in submit, you have to declare id in the input that has type submit. Secondly, the logic was incorrect when you validate the form, return statement was missing in the else part when the attempt was not equal to zero.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var attempt =3;
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "dr" && password == "8428") {
return true;
} else {
attempt--;// Decrementing by one.
alert("You have left " + attempt + " attempt!");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
return false;
}
}
</script>
</head>
<body>
<div class="loginbox">
<h1>Login Here</h1><br>
<form action="/loginbox.html" name="myForm" onsubmit="return validateForm()">
<div>
<p>user name</p>
<input type="text" name="userName" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="password" placeholder="Enter password" id="password">
</div><br>
<input type="submit" id="submit" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
</body>
</html>
I have been trying to solve the problem that I am having with this email validation in JavaScript, but all the code I have tried was having the same problem. When I used the developer tool in google chrome I didn't see any error message, so I don't understand why is this happening. I want to show the error message if an email is not valid.
What am I missing?
link full code - https://jsfiddle.net/lmanhaes/cq1g5dyt/14/
Thanks.
function checkEmail(validate) {
let re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let email = validate.userName.value;
if (email === re)
return true;
else {
error.setAttribute("class", "error");
error.innerHTML = ("Email is not correct. Please retype.");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<h1></h1>
<ul>
</ul>
<h1>Register</h1>
<p>* = Required Field</p>
<div id="formcontainer">
<form id="registerDetails" action="lmanha01_fma_t3confirm.html">
<div>
<label for="username">* Userame:</label>
<input type="text" id="userName" required>
<!--pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"-->
<!--check that the user has in fact typed in an email address-->
<div id="error"></div>
</div>
<div>
<label for="password">* Password (must be 8 characters exactly and include one Uppercase, one
lowercase and
one number):</label>
<input type="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$"
required>
<input type="checkbox" id="showpasswords" onclick="Toggle()">
<!--This creates a toggle effect-->
<label id="showpasswordslabel" for="showpasswords">Show passwords</label>
</div>
<div>
<label for="retypedpassword">* Retype your password:</label>
<input type="password" id="retypedpassword">
<span id="passwordmatcherror"></span>
</div>
<div>
<button type="submit" id="registerButton">Register</button>
</div>
</form>
</div>
</section>
<!--moved to the bottom to load the page faster-->
<script src="scripts/exemple.js"></script>
</body>
</html>
You should use test() method of regex to return true or false if input value matches the email pattern.
if (re.test(email)){
//logic when it is valid
}
else{
//logic when it is invalid
}
const email = document.getElementById('email');
function validate(){
const regex=/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return regex.test(email.value) ?console.log("Valid"):console.log("Invalid");
}
<input type="email" id="email" />
<button onclick="validate()">
Validate
</button>
I am trying to use data retrieved from session storage to validate a newly registered user. It just needs to be in session storage for this project. Basically, the new user registers on a Signup Page; the email and password are saved in session storage; then they should be able to log in through the regular login page as long as the tab is opened. Even though the user input is set in the session storage, I am unable to validate the user in the regular login screen afterwards. I keep receiving the error "username/password do not match". What am I missing that is causing it not to validate? Any help is much appreciated.
JavaScript
// TISSUE Login Script
//Function called when form is submitted
//Validates form and allows login
function validate() {
'use strict';
var UserName = document.getElementById('UserName').value;
var email = "adrian#tissue.com";
var email1 = "admin#tissue.com";
var Password = document.getElementById('Password').value;
var pass = "welcome1";
var pass1 = "admin123";
// stored data from the register-form
var storedName = sessionStorage.getItem('email');
var storedPw = sessionStorage.getItem('password');
// entered data from the login-form
var userName = document.getElementById('UserName');
var userPw = document.getElementById('Password');
if ((UserName == email) && (Password == pass)) {
window.location.href = "Issues.html";
return false;
} else if ((UserName == email1) && (Password == pass1)) {
window.location.href = "subscription_dashboard.html";
return false;
} else if ((userName == storedName) && (password == storedPw)) {
window.location.href = "Issues.html";
return false;
} else {
alert("username and/or password do not match");
return false;
}
}
// End of Validation
function init() {
'use strict';
if (document && document.getElementById) {
var loginform = document.getElementById('loginform');
loginform.onsubmit = validate;
}
}
window.onload = init;
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<meta name="author" content="Stephen Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
Home
SignUp
</div>
<div id="loginwrap">
<h1>Login</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return validate()">
<div class="labels">
<label for="UserName">UserName:</label>
</div>
<div class="rightTab">
<input type="email" name="UserName" id="UserName" class="input-field" placeholder="E-mail Address" required>
</div>
<div class="labels">
<label for="Password">Password:</label>
</div>
<div class="rightTab">
<input type="password" name="Password" id="Password" class="input-field" placeholder="Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
New User JavaScript
// UserStore Module
// Store Username and Password in sessionStorage
function newUser () {
var userName = document.getElementById('email').value;
var password = document.getElementById('password').value;
sessionStorage.setItem("userName", userName);
sessionStorage.setItem("password", password);
}
New User Registration HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tissue: Titan Issue Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Issue Tracking System"/>
<meta name="author" content="Stephen Morris">
<link rel="stylesheet" type="text/css" href="tissue.css">
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="wrapper">
<h2>TISSUE: Titan Issue Tracker</h2>
<div class="topnav">
Home
Login
</div>
<div id="loginwrap">
<h1>Create New Account</h1>
</div>
<div id="signupForm">
<form action="Issues.html" method="post" id="loginform" onsubmit="return newUser()">
<div class="labels">
<label for="email">* E-mail:</label>
</div>
<div class="rightTab">
<input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
</div>
<div class="labels">
<label for="Password">* Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
</div>
<div class="labels">
<label for="password">* Confirm Password:</label>
</div>
<div class="rightTab">
<input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
</div>
<div id="loginwrap">
<hr>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="copyright">
Copyright © 2018 Titan Issue Tracker
</div>
</body>
</html>
I think the problem is you're setting storage with a name and trying to get item with another key name e.g:
sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem('email');
it should be instead:
sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem("userName");
or
sessionStorage.setItem("email", userName);
var storedName = sessionStorage.getItem("email");
Hope it helps.