Create a signup form using HTML, CSS & Javascript with validations
6 min readJul 17, 2021
Hey folks! In this blog post, we will be learning how to create a signup form with validations. And show a popup modal on submitting the form if the form fields satisfy our validation conditions, or else we will show the error messages accordingly.
HTML setup
Create an index.html file and paste the code below. We are importing the stylesheet at the top and the javascript file to apply some styles and validations to our application in this setup. We are also using Montserrat font, feel free to use any other font you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200&display=swap>" rel="stylesheet">
<title>Signup form</title>
</head>
<body>
<form onsubmit="validate(event)">
<h2>Signup form</h2>
<div>
<h4><label for="userId">User…