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.
I’m really loving the theme/design of your web site.
Do you ever run into any browser compatibility problems? A
few of my blog visitors have complained about my site not
operating correctly in Explorer but looks great in Chrome.
Do you have any suggestions to help fix this issue?
This page certainly has all the info I needed concerning this
subject and didn’t know who to ask.
My family members always say that I am wasting my
time here at web, however I know I am getting familiarity all the time by reading such good articles or reviews.
Hi there to every single one, it’s actually a fastidious for me to pay a visit this web site, it includes important
Information.
I am glad to be a visitor of this staring web site! , thanks for this rare info ! .
My brother recommended I might like this web site. He used to be totally right. This submit truly made my day. You can not believe just how much time I had spent for this information! Thanks!