Annoying Submit Button using HTML, CSS and JavaScript

Hello Guys! Welcome to Coding Torque. In this blog, we are going to create an annoying submit button using HTML, CSS & JavaScript. This button doesn’t allow you to click on it until you enter a valid email and password. This is a great project to create if you are a beginner and learning web development.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Annoying Submit Button using JavaScript with Source Code - @code.scientist x @codingtorque</title>
</head>

<body>

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag

<div class="container">
    <form>
        <h2>Login</h2>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <label for="password">Password</label>
        <input type="password" id="password" required autocomplete>
        <a href="#">Forgot Password?</a>
        <button id="submitBtn">Submit</button>
        <p id="help-text"></p>
    </form>
</div>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Potta+One&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background: white;
  color: black;
  width: 20rem;
  padding: 30px 30px;
  border-radius: 10px;
}

form {
  display: flex;
  flex-direction: column;
}

form input {
  margin-bottom: 10px;
  border: 2px solid gainsboro;
  outline: none;
}

form a {
  text-decoration: none;
}

#submitBtn {
  margin-top: 30px;
  align-self: flex-start;
  padding: 5px 15px;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.5s ease;
}

#help-text {
  margin-top: 10px;
  font-size: 12px;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

let submitBtn = document.getElementById("submitBtn");
let email = document.getElementById("email");
let password = document.getElementById("password");
let helpText = document.getElementById("help-text");

const validateEmail = (email) => {
    return String(email)
        .toLowerCase()
        .match(
            /^(([^<>()[\]\\.,;:\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,}))$/
        );
};

submitBtn.onmouseover = () => {
    if (validateEmail(email.value) && password.value.length > 8) {
        helpText.innerText = "Now you can submit"
    } else {
        if (submitBtn.style.alignSelf === "flex-end") {
            submitBtn.style.alignSelf = "flex-start"
        }
        else {
            submitBtn.style.alignSelf = "flex-end"
        }
        helpText.innerText = "You cannot submit until your email is validated and passowrd is greater than 8 characters"
    }
}

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖