Form validation is essential for ensuring that user-submitted data is accurate and meets the required criteria. HTML5, CSS, and JavaScript can be combined to create robust form validation
Table of Contents
Form Validation
Form validation is a crucial part of web development to ensure that user-submitted data is accurate and follows the required format. HTML5, CSS, and JavaScript can be used together to create effective form validation. Here’s a step-by-step guide on how to implement form validation using these technologies:
HTML
CSS
JavaScript
HTML Code of Form Validation
Start by creating an HTML form that includes the input fields you want to validate.
The file name index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Sign Up Today!</h1>
<!-- Form -->
<form id="form">
<!-- Full Name -->
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name"
placeholder="Full Name" required minlength="3" maxlength="100">
</div>
<!-- Phone Number -->
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone"
placeholder="555-555-5555" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</div>
<!-- Email Address -->
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email"
placeholder="email" required>
</div>
<!-- Website URL -->
<div class="form-group">
<label for="website">Website URL</label>
<input type="url" id="website" name="website"
placeholder="website"required >
</div>
<!-- Password -->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" id="password1" placeholder="Create Password (Min. 8 characters)"
required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"
title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number.">
</div>
<!-- Confirm Password -->
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Confirm Password"
required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$" name="password">
</div>
<button type="submit">Register</button>
</form>
<!-- Error/Success Message -->
<div class="message-container">
<h3 id="message">Don't Hesitate!</h3>
</div>
</div>
<!-- Script -->
<script src="rakesh.js"></script>
</body>
</html>CSS Code of Form Validation
Style the form and error messages using CSS. You can make error messages initially invisible and style them to make them noticeable when validation fails:
file name style.css
@import url('https://fonts.googleapis.com/css2?family=Sen&display=swap');
button{
display: block;
}
html{
box-sizing: border-box;
}
body{
margin: 0%;
min-height: 100vh;
font-family: sen, sans-serif;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
background: #c9ced3;
}
.container{
width: 480px;
height: 630px;
background: white;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
box-shadow: 0 5px 30px 10px rgba(0, 0,0, 0.4);
}
/* form*/
form{
width: 90%;
}
.form-group{
height: 65px;
}
label{
position: relative;
bottom: 3px;
}
input{
width: 100%;
height: 34px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
outline: none;
box-sizing: border-box;
transition: all 0.3s;
}
input:valid{
border: 1px solid green;
}
input:invalid{
border: 1px solid red;
}
button{
cursor: pointer;
color: #1666b6;
background: black;
border: none;
border-radius: 5px;
height: 50px;
width: 100%;
font-size: 20px;
letter-spacing: 2px;
margin-top: 5px;
}
button:hover{
filter: brightness(200%);
background: black;
}
button:focus{
outline: none;
}
.message-container{
border: 1px solid black;
border-radius: 5px;
width: 90%;
margin-top:20px ;
display: flex;
justify-content: center;
color: black;
}JavaScript Code of Form Validation
Use JavaScript to perform the actual validation. Add an event listener to the form’s submit event to trigger the validation function:
the file name is rakesh.js
const form= document.getElementById('form');
const password1El =document.getElementById('password1');
const password2El =document.getElementById('password2');
const messageContainer= document.querySelector('message-container');
const message= document.getElementById('message');
//const submit = document.getElementById('submit');
let isValid= false;
let passwordsMatch= false;
function validateForm(){
//Using Contraint API
isValid=form.checkValidity();
// console.log(isValid);
if(!isValid){
message.textContent= 'please fill out all fields.';
message.style.color= 'red';
messageContainer.style.bordercolor= 'red';
return;
}
// check password
if(password1El.value===password2El.value){
passwordsMatch=true;
password1El.style.bordercolor='green';
password2El.style.bordercolor='green';
return;
}else{
passwordsMatch= false;
message.textContent='make sure passwords match';
messageContainer.style.bordercolor='red';
password1El.style.bordercolor= 'red';
password2El.style.bordercolor='red';
}
// if form is valid and password match
if( isValid && passwordsMatch){
message.textContent='Successfully Registered';
message.style.color='green';
messageContainer.style.bordercolor= 'green';
}
}
function storeFormData(){
const user={
name: form.name.value,
phone:form.phone.value,
email: form.email.value,
website:form.website.value,
password:form.password.value
};
console.log(user)
}
function processFormData(e){
e.preventDefault();
// console.log(e);
validateForm();
if(isValid && passwordsMatch){
storeFormData();
}
}
// event Listener
form.addEventListener('submit', processFormData);
- Submission:If the validation passes (i.e.,
validateForm()returnstrue), the form will be submitted. If the validation fails, the form submission will be prevented.
This is a basic example of form validation. Depending on your requirements, you can add more complex validation rules, error messages, and styling. Additionally, consider using HTML5 input attributes like type="email", type="number", pattern, and more to take advantage of built-in browser validation features.