The Verification between email addresses function will not work - javascript

I want the user to verify his email address in the "email2" field and in case he has entered the wrong email address the function returns an error message and corrects his email address from the "email" field. This function returns no error but also does not work, ie does not report an error message when email addresses differ. I'm asking for help.
<html>
<script>
function validateForm() {
var x = document.forms["contactform"]["email"].value;
if (x == "") {
alert("E-mail is empty");
return false;
}
var x = document.forms["contactform"]["email2"].value;
if (x == "") {
alert("Verification E-mail is empty");
return false;
if(email != email2){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
}
}
</script>
<body>
<form name="contactform" method="post">
<input type="text" name="email" maxlength="80" size="30" placeholder="E-mail contact person" title="The e-mail must be in the format, example: primer#email.com ">
<input type="text" name="email2" maxlength="80" size="30" placeholder="Verify E-mail address" title="The e-mail must be in the format, example: primer#email.com ">
<input type="submit" value="Send" style="border:1px solid #000000">
</form>
</body>
</html>

You are missing a } to terminate the second IF so the third IF is inside the second and therefore never runs because it is after a return :)
<script>
function validateForm() {
var x = document.forms["contactform"]["email"].value;
if (x == "") {
alert("E-mail is empty");
return false;
}
var x = document.forms["contactform"]["email2"].value;
if (x == "") {
alert("Verification E-mail is empty");
return false;
} <-- !!!!!!!!!!!!! THIS WAS MISSING !!!!!!!!!!!!
if(email != email2){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
#} <-- THIS WAS IN THE WRONG PLACE REMOVE IT
}
</script>

You defined a variable named x to hold email input values, then you do comparison with email and email2 variable, which are not defined.
function validateForm() {
var email = document.forms["contactform"]["email"].value;
if (email == "") {
alert("E-mail is empty");
return false;
}
var verificationEmail = document.forms["contactform"]["email2"].value;
if (verificationEmail == "") {
alert("Verification E-mail is empty");
return false;
} <-- !!!!!!!!!!!!! THIS WAS MISSING !!!!!!!!!!!!
if(email != verificationEmail){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
}

Related

if/else not working in Javascript Login Page

I have created a Login Page with HTML, CSS & JS. If the value in <input> is correct, the js code takes me to the location I want with the code window.location.replace("href") and if the value is incorrect, it displays an alert.
But I want a code so that if the input is empty it would show another alert not the previous one. I have also used required field in html <input> tag: <input type="password" id="password" class="input" required>, but by using required the whole code doesn't works.
The code is:
Javascript
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
I have tried this but it is not working:
`
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
if (username === "" && password === "") {
alert("Please enter information");
} else {
return;
}
}
`
The problem is with your if/else structure.By using required in form, your form is not submitted and your function is not called, your function will only be called when the form is submitted, required doesn't allow form to submit until the field is filled out.
html file is:
<body>
<form id="form">
<input type="text" placeholder="username" id="username">
<input type="text" placeholder="password" id="password">
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
and javascript file will be:
document.getElementById("form").addEventListener("submit", auth);
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(username);
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} if (username === "" && password === "") {
alert("Please enter information");
} else{
alert("Please enter valid information");
return;
}
}
for live demo, visit my codepen
Just add a validation to check if the fields are empty:
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return;
}
So your method would look like:
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// check if the username of password are empty
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return false;
}
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
Regarding your second snippet, you cant do 2 else's like if / else / else, the right way to do it with a single if block would be to use a simple, if / else if / else like this:
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return;
} else if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
NOTE: Javascript code can be seen just by inspecting the code of the page, so storing username & password in the js file like you are doing is super insecure, anyone would be able to inspect the code and see what username and password should be used.
The reason I can see is the order of if-else and if statements. The if statement after if-else is unreachable that's why it does not show the new alert you added.
Try using the following code :
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user")
{
window.location.replace("http://www.rex14.ml/");
} else if (username === "" && password === "") {
alert("Please enter information");
} else {
alert("Please enter valid information");
return;
}
}
Fist of all, you should use "else if". Otherwise your third condition would never be considered. A simple solution is like this:
function auth(event) {
event.preventDefault();
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else if (username === "" && password === "") {
alert("Please enter information");
return;
} else {
alert("Please enter valid information");
return;
}
}
You can also get rid of any "else" statement this way:
function auth(event) {
event.preventDefault();
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
return;
}
if (username === "" && password === "") {
alert("Please enter information");
return;
}
alert("Please enter valid information");
return;
}
Second, if you have a "required" input inside a form, and you leave it empty, it won't be submitted. If your input is not inside a form, add an event handler. If it is inside a form, remove the "required" field because you are already handling the empty input problem inside your auth function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="form" onsubmit="return auth(this)">
<input type="text" placeholder="username" id="username" />
<input type="text" placeholder="password" id="password" />
<button type="submit">Submit</button>
</form>
</body>
<script>
function auth(event) {
var username = event.username.value;
var password = event.password.value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return false;
}
return false;
}
</script>
</html>

HTML and javascript input and function

I am a new programer in js and I tried to do a basic website using js and html.
I tried to do like username and password input boxes but the function of it doesn't work. What is the problem?
This is the code:
function entering() {
alert("hi")
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
if (username == "f") {
if (password == "f") {
alert('Nice');
}else {
alert('wrong password');
}else{
alert('wrong username');}}
document.getElementById("frm1").submit();
}
<h1>Best Website</h1>
<h2>Hello!<h2>
<form id = frm1>
Username: <input type = "text" id="fuser"><br>
Password: <input type = "text" id="fpass"><br>
<input type = "button" onclick = "entering()" value = "submit">
</form>
What you are searching for is the value property of the input element.
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
Are only references to the elements in your page, not what the user entered, for that use
var username = document.getElementById("fuser").value;
var password = document.getElementById("fpass").value;
Complete Code:
function entering() {
alert("hi")
var username = document.getElementById("fuser").value;
var password = document.getElementById("fpass").value;
if (username == "f") {
if (password == "f") {
alert("correct");
} else {
alert("wrong password")
}
} else {
alert("wrong username");
}
//document.getElementById("frm1").submit();
}
<h2>Hello!<h2>
<form id = frm1>
Username: <input type = "text" id="fuser"><br>
Password: <input type = "text" id="fpass"><br>
<input type = "button" onclick = "entering()" value = "submit">
</form>
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
When grabbing an input element, you get the element stored into a variable, not the value. When you write your if conditional then, you need to point to the property on the element called value.
if (username.value == "f") {
if (password.value == "f") {
You'll need to rework your if/else statements and make sure to access the value of the element you're referencing.
if (username == "f") {
if (password == "f") {
alert('Nice');
}else {
alert('wrong password');
}else{
alert('wrong username');}}
To:
if (username.value == "f") {
if (password.value == "f") {
alert('Nice');
} else {
alert('wrong password');
}
} else {
alert('wrong username');
}
That should get you moving again.
<!DOCTYPE html>
<html>
<head>
<title>The Best Website</title>
</head>
<body>
<h1>Best Website</h1>
<h2>Hello!
<h2>
<form id=frm1>
Username:
<input type="text" id="fuser">
<br> Password:
<input type="text" id="fpass">
<br>
<input type="button" onclick="entering()" value="submit">
</form>
<script>
function entering() {
alert("hi")
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
if (username == "f") {
if (password == "f") {
alert('Nice');
} else {
alert('wrong password');
}
} else {
alert('wrong username');
}
document.getElementById("frm1").submit();
}
</script>
</body>

Form validation not working

I have a simple log in and I cannot get the validation to work at all. I was wondering if someone could help.
HTML:
<div class="login">
<h2>Sign In</h2>
<form id="frmLogin" method="post">
Username: <input id="txtUsername" name="txtUsername" type="text" /><br/>
Password: <input name="txtPassword" type="password" /> <br/>
<button onClick="validateLogin()">Log In</button>
</form>
</div><!-- End of Login Section -->
Javascript:
<script>
function validateLogin()
{
var userName = document.getElementsByID('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
</script>
At the moment I'm just testing for an empty username, once I can get this working I'll continue on with the rest.
Thank you!
To get and element by ID the function name is getElementById and not getElementsByID, besides, javascript is case sensitive so getElementByID does not work.
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
Do your jquery code something like these :-
<script>
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
var errMessage = ""
if(userName === "")
{
errMessage = "Username cannot be blank!";
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}
else if (invalidForm == 1)
{
alert(errMessage);
return false;
}
}
</script>
It may help you.

username and password validation using javascript

I have this simple problem that I don't know what did I do wrong.
so I have this code:
function validateForm()
{
var validation = true;
validation &= validateUsername();
validation &= validatePassword();
return validation? true:false;
}
function validateUsername()
{
var username = $('#username').val();
if( username == "" )
{
alert("Login failed, Please enter your username");
return false;
}
else if( username != "username" )
{
alert("Login failed, Username Incorrect");
return false;
}
else
{
return true;
}
}
function validatePassword()
{
var password = $('#pass').val();
if(password != "password")
{
alert("Login failed, Password is incorrect");
return false;
}
else if(password == "")
{
alert("Login failed, Please enter your password");
return false;
}
else
{
return true;
}
}
If I enter no password it should alert that you should enter your password but instead that it is alerting password is incorrect. Why is it not going through all the if's I created?
You swap the conditions, and check for an empty string before you check for the correct password
function validatePassword() {
var password = $('#pass').val();
if(password == "") {
alert("Login failed, Please enter your password");
return false;
} else if(password != "password") {
alert("Login failed, Password is incorrect");
return false;
} else {
return true;
}
}
right now you're checking if it's not the correct password first, and as an empty string probably isn't the correct password, that matches before the check for an empty string.

Issue in submitting - update

Thanks for the input so far.
The logic is there but it still does not want to submit when passing true to submit...
I added an alert to see if it gets called when value is true, but for some strange reason, the 'return false' is not passing value to submit....
I cant understand what the issue is. Starting to get intimidated lol
<form name="newuser" id="form" method="post" action="do_new_user.php" onSubmit="return validateForm(false)">
function validateForm(submitNow){
if (submitNow == true){
alert ('call ok');
return true;
}
else
{
var x=document.forms["newuser"]["name"].value;
var x2=document.forms["newuser"]["surname"].value;
var x3=document.forms["newuser"]["email"].value;
var x4=document.forms["newuser"]["password1"].value;
var x5=document.forms["newuser"]["password2"].value;
if (x==null || x=="")
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Please enter your name.");
return false;
}
if (x2==null || x2=="")
{
$("#form_status p").fadeIn("slow");
$("#form_status").text("Please enter your surname.");
return false;
}
if (x3==null || x3=="")
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Please enter your email address.");
return false;
}
var atpos=x3.indexOf("#");
var dotpos=x3.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x3.length)
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Email address in invalid.");
return false;
}
if (x4==null || x4=="")
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Please enter your password.");
return false;
}
if (x5==null || x5=="")
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Please re-enter your password.");
return false;
}
if (x4!==x5)
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Password Mismatch.");
return false;
}
//Check if username exists.
$.post("http://ryangosden.com/breadcrumbs/check_user_exists.php",
{
x3 : x3
} ,
function(data)
{
var obj = jQuery.parseJSON(data);
if (obj.email_exists == 1)
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Email Address Taken.");
}
if (obj.email_exists == 2)
{
$("#form_status").fadeIn("slow");
$("#form_status").text("Email ok.");
validateForm(true);
}
});
return false;
}
}
If I understand correctly, the form should submit when email is not taken (and all other fields OK)
Which seem to be done at this point of your code :
$("#form_status").fadeIn("slow");
$("#form_status").text("Email ok.");
validateForm(true);
}
You have to catch the argument so you can submit the form, which could be done at the beginning of your function :
function validateForm(submitNow) {
if (submitNow) return true;
[... rest of function...]
}
Thanks to A. Wolff and Karl-André Gagnon for their comments, my first answer was too quick :)
Update:
Here is a working example you can extend on
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function validateform(submitNow) {
if (submitNow) return true;
else if ($('#input').val()) return validateform(true);
alert('Please enter a value');
return false;
}
</script>
<form id="#form" action="http://google.com" onsubmit="javascript:return validateform()">
<input type="text" id="input"><input type="submit">
</form>

Categories

Resources