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>
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";
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 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.
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body >
<div id="divi" height="100">
<form class="form-inline" role="form">
<div class="form-group" >
<label class="sr-only" for="em">Email:</label>
<input type="email" id="em" placeholder="Enter email" required >
</div>
<div class="form-group" >
<label class="sr-only" for="pwd">Password:</label>
<input type="password" id="pwd" placeholder="Enter password" required>
</div>
<button type="button" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
Hi please help me to validate the user id with email id and the password should contain uppercase lowercase and atleast one character?
Follow this guide:
http://www.webdesignerdepot.com/2012/01/password-strength-verification-with-jquery/
Here is an example of the Jquery code:
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
[A-z]
This expressions checks to make sure at least one letter of A through Z (uppercase) or a through z (lowercase) has been entered
[A-Z]
This expressions checks to make sure at least one uppercase letter has been entered
\d
This will check for any digits 0 through 9
My first post here #stackoverflow. Please bear with me.
Look at the code below. I want the javascript to post to an PHP (applybeta.php) document IF there is a '#' in the field with the name & id 'epost'. If there isn't a '#' in the field, a messagebox will pop up telling the user they entered an invalid e-mail address.
If you don't enter a '#' the message box shows up. But if you do enter a valid email it doesn't post to "applybeta.php", nothing happens at all. Anybody got an idea why? Sorry if the description is vague, hopefully you'll figure out what I mean :)
The e-post field got both an id and a name because I tried with both, none of them works.
<!DOCTYPE html>
<html>
<head>
<title>Binärklocka</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<!-- table font --> <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
}
else {
document.getElementById("minForm");
//z.submit();
//alert("hej");
}
}
</script>
<div id="wrap">
<div id="main">
<br>
<br>
<table id="nav">
<tr>
<td>Store</td>
<td>Our Products</td>
<td><img src="home.png" alt="hem" width="60" height="60"/></td>
<td>About Us</td>
<td>Contact</td>
</tr>
</table>
<hr id="linje1" />
</div>
</div>
<p id="binaryclock" onclick="showLink()">
We are looking for beta testers for our newly created clock!<br />
To participate, fill in the forms below with your real name</br />
and a valid e-mail address and a download link will appear.
</p>
<!-- Form that I want to post -->
<div id="applybeta">
<form action="apply.php" method="post" id="minForm" name="minForm">
<input type="text" placeholder="Full name" name="name" /><br />
<!-- checking this field for '#' -->
<input type="text" placeholder="E-mail" id="email" /><br /><br />
<!-- end of field -->
<input onclick="kollaepost()" type="button" name="submit" value="Send" /><br />
</form>
</div>
<!-- End of the form -->
<div id="dlink">
shdgfghClick here to download
</div>
<div id="bottomtext">
<p># 2015 ClockMasters Elite</p>
</div>
</body>
</html>
Instead of having an input of type button, try submit. Your onclick-function can then serve as a validation function by returning true or false, and thus influence whether the form will be submitted. Something like this:
<input onclick="return kollaepost()" type="submit" name="submit" value="Send" />
and:
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
return false;
}
return true;
}
</script>
Also see this question for a more detailed explanation on this method, in general.
You can submit your form using the .submit() method.
var fromElement = document.getElementById("minForm");
formElement.submit();
For further reference, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit