Today, In this Blogpost you'll learn how to create Form validation using Html, CSS and Javascript with source code. In web development, forms are essential because they let users enter and submit data. But it's crucial to make sure the data is accurate and intact. Form validation is useful in this situation.
Verifying that user-submitted data in a form is valid and satisfies predetermined criteria is known as form validation. Preventing the submission of inaccurate or incomplete data is its main goal.
Form validation used to usually take place at the server, following client submission of all required data with a click of the Submit button. The server would have to send all the data back to the client and ask that the form be resubmitted with accurate information if the data entered by the client was missing or incorrect. This was a very time-consuming procedure that used to strain the server greatly.
Form Validation Using HTML, CSS and Javascript
Create a folder, add files (index.html, style.css, script.js) with specified names, forming the foundation for a form with HTML, CSS, and JavaScript validation.
Create a basic form layout by adding the following HTML codes to your index.html file: You can add or remove fields as needed from this form, which already has fields for your username, email address, password
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form action="/" id="form" onsubmit="return validateform()">
<h1>Registration</h1>
<div class="input-form">
<label for="username">Username</label>
<input type="text" id="username" name="username" />
<div class="error" id="name-error"></div>
</div>
<div class="input-form">
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<div class="error" id="email-error"></div>
</div>
<div class="input-form">
<label for="password">Password</label>
<input type="password" id="password" name="password" />
<div class="error" id="password-error"></div>
</div>
<div class="input-form">
<label for="password">Password Again</label>
<input type="password" id="password2" name="password2" />
<div class="error" id="password2-error"></div>
</div>
<button type="submit">Sign Up</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Next, update your style with the following CSS codes.to style the form and give it a beautiful, responsive design, use a CSS file. You can change the colour, font, size, and other CSS properties of this code to make it your own.
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
#form {
display: flex;
flex-direction: column;
width: 300px;
margin: 10vh auto 0 auto;
padding: 30px;
background-color: #d9d9d9;
border-radius: 5px;
font-size: 12px;
}
#form h1 {
color: #284b63;
text-align: center;
}
#form button {
padding: 10px;
margin-top: 20px;
width: 100%;
color: #fff;
background-color: #284b63;
border: none;
border-radius: 5px;
}
.input-form {
display: flex;
flex-direction: column;
padding-top: 5px;
font-weight: 600;
}
.input-form label {
padding: 10px 0;
}
.input-form input {
display: block;
border: 2px solid #ffffff;
border-radius: 5px;
font-size: 15px;
padding: 10px;
width: 100%;
}
.input-form input:focus {
outline: none;
}
.input-form.succes input {
border-color: #284b63;
}
.input-form.error input {
border-color: #cf1714;
}
.input-form .error {
color: #cf1714;
font-size: 12px;
}
Lastly, update your script with the JavaScript code that follows.js file to show the relevant error messages and enable form validation.
function validateform() {
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const password2 = document.getElementById("password").value;
document.getElementById("name-error").innerHTML = "";
document.getElementById("email-error").innerHTML = "";
document.getElementById("password-error").innerHTML = "";
document.getElementById("password2-error").innerHTML = "";
let isValid = true;
if (username == "") {
document.getElementById("name-error").innerHTML =
"*Please Enter your Valid Username";
isValid = false;
}
if (email == "") {
document.getElementById("email-error").innerHTML =
"*Please Enter your Valid Email";
isValid = false;
}
if (password == "") {
document.getElementById("password-error").innerHTML =
"*Please Enter your Valid Password";
isValid = false;
}
if (password !== password2) {
document.getElementById("password2-error").innerHTML =
"Password do not match";
isValid = false;
}
return isValid;
}