Form Validation using HTML5 and JavaScript

Form Fields | December 14, 2020

You can create contact form validation using HTML5 and JavaScript.

Video tutorial of Form Validation using HTML5 and JavaScript

You can create contact form validation using HTML5 and JavaScript.

Form Validation using HTML5 and JavaScript [Source Codes]

This source code can help you to create Form Validation using HTML5 and JavaScript.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div class="container">
	<form action="">
		<div class="row">
			<div class="column">
				<input type="text" placeholder="Name*" required name="name" oninvalid="this.setCustomValidity('Please Enter Your Name')" oninput="this.setCustomValidity('')">
			</div>	
			<div class="column half">
				<input type="email" placeholder="Email*" required name="email"  oninvalid="this.setCustomValidity('Please Enter Your Email')" oninput="this.setCustomValidity('')">
			</div>
			<div class="column half">
				<input type="tel" placeholder="Phone*" required name="phone" oninvalid="this.setCustomValidity('Please Enter Your Phone No')" oninput="this.setCustomValidity('')" pattern="[1-9]{1}[0-9]{9}">
			</div>
			<div class="column">
				<textarea placeholder="Message*" required oninvalid="this.setCustomValidity('Please Enter Your Message')" oninput="this.setCustomValidity('')">

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;

}

.container{
	max-width: 800px;
	margin: 0 auto;
	padding:35px;
	border-radius: 5px;
	background-color: darkgray
}
.row{
	display: flex;
	flex-flow: wrap;
	margin: 0 -15px;
}
.column{
	flex:0 0 100%;
	padding: 0 15px;
}
.column.half{
	flex:0 0 50%;
}

input,textarea{
	width: 100%;
	padding: 15px 20px;
	margin: 0 0 30px;
	font-family: arial;
	background-color: #fbfbfb;
	border-radius: 3px;
	font-size: 16px;
	border:1px solid #a1a1a1;
}
textarea{
	height: 150px;
	resize: none;
}
input[type="submit"]{
	display: block;
	margin: 0 auto;
	width: 150px;
	text-align: center;
	cursor: pointer;
	background-color: darkblue;
	border:0;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
}

jQuery multiselect dropdown with bootstrap selectpicker

Build a Stop-Watch Web App Using JavaScript

January 25, 2023

Build Loan EMI Calculator DIY Finance Tool using JavaScript

March 20, 2024

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

May 23, 2022