CODEWITHSUNDEEP
javascripthtmlcssformsemail
Nasya
Nasya

Reputation: 25

Form Validation - Email and Password

I want to create a form that takes in an email address and a password. Email and password have been initialized before, so an error message will appear in the email or the password entered does not match. If both are correct then the message "login successful" should appear. How do I get this message to appear?

Here is my code:

var email = document.forms["form"]["email"].value;
var alamat = document.forms["form"]["password"].value;
if (email == "[email protected]" && password == "12345") {
  alert("Login Successful!");
} else {
  alert("The email or password you entered is wrong!");
  return false;
}
body {
  background: #3498db;
  font-family: sans-serif;
}

h2 {
  color: #fff;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background: #fff;
  border-radius: 3px;
}

label {
  font-size: 10pt;
  color: #555;
}

input[type="password"],
input[type="text"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}
<html>

<head>
  <title>Form Validasi</title>
  <link rel="stylesheet" type="text/css" href="tampilan.css">
  <script src="apps.js"></script>
</head>

<body>
  <div class="login">
    <form action="#" method="get" id="form">
      <div>
        <label>Email</label>
        <input type="text" name="email" />
      </div>
      <div>
        <label>Password</label>
        <input type="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Login" class="tombol">
      </div>
    </form>
  </div>

</body>

</html>

Upvotes: 1

Views: 1389

Answers (2)

Damiano Mazzara
Damiano Mazzara

Reputation: 61

In this way your javascript code get executed instantly, not when clicking.

If you want to execute a piece of code after clicking create a function, for example login().

And then add in your button element onClick="login()" and don't use input type="submit", use type="button" as type, because in this case you are not submiting any form but just processing it with js.

Please, also note that your are declaring var alamat but you check for var password == xxx in the condition (that you didn't create) I fixed this too in the snippet by changing alamat with password.

Here the working snippet:

function login(){
  var email = document.forms["form"]["email"].value;
  var password = document.forms["form"]["password"].value;
  if (email == "[email protected]" && password == "12345") {
      alert("Login Successful!");
  } else{
      alert("The email or password you entered is wrong!");
      return false;
  }
}  
body {
  background: #3498db;
  font-family: sans-serif;
}
 
h2 {
  color: #fff;
}
 
.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background: #fff;
  border-radius: 3px;
}
 
label {
  font-size: 10pt;
  color: #555;
}
 
input[type="password"],
input[type="text"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}
 
.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}
<html>
<head>
    <title>Form Validasi</title>
    <link rel="stylesheet" type="text/css" href="tampilan.css">
    <script src="apps.js"></script>
</head>
<body>
    <div class="login">
        <form action="#" method="get" id="form">
            <div>
                <label>Email</label>
                <input type="text" name="email"/>
            </div>
            <div>
                <label>Password</label>
                <input type="password" name="password"/>
            </div>
            <div>
                <input onClick="login()" type="button" value="Login" class="tombol">
            </div>
        </form>
    </div>

</body>
</html>

Upvotes: 2

Spectric
Spectric

Reputation: 32002

Listen for the submit event:

form.addEventListener('submit', function(e) {
  var email = document.forms["form"]["email"].value;
  var alamat = document.forms["form"]["password"].value;
  if (email == "[email protected]" && password == "12345") {
    alert("Login Successful!");
  } else {
    alert("The email or password you entered is wrong!");
    e.preventDefault();
  }
})
body {
  background: #3498db;
  font-family: sans-serif;
}

h2 {
  color: #fff;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background: #fff;
  border-radius: 3px;
}

label {
  font-size: 10pt;
  color: #555;
}

input[type="password"],
input[type="text"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}
<html>

<head>
  <title>Form Validasi</title>
  <link rel="stylesheet" type="text/css" href="tampilan.css">
  <script src="apps.js"></script>
</head>

<body>
  <div class="login">
    <form action="#" method="get" id="form">
      <div>
        <label>Email</label>
        <input type="text" name="email" />
      </div>
      <div>
        <label>Password</label>
        <input type="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Login" class="tombol">
      </div>
    </form>
  </div>

</body>

</html>

Upvotes: 1

Related Questions