HTML Contact Form Validation with jQuery

by jay prakash

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contact Form Validation</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="validation.js"></script>
</head>
<body>
	<form id="contactForm">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name">
		<span class="error" id="nameError"></span>
		<br>

		<label for="email">Email:</label>
		<input type="email" id="email" name="email">
		<span class="error" id="emailError"></span>
		<br>

		<label for="phone">Phone:</label>
		<input type="text" id="phone" name="phone">
		<span class="error" id="phoneError"></span>
		<br>

		<button type="submit">Submit</button>
	</form>

	<script src="script.js"></script>
</body>
</html>

CSS

body {
	font-family: Arial, sans-serif;
	padding: 20px;
}

form {
	max-width: 400px;
	margin: 0 auto;
}

label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

input[type="text"],
input[type="email"] {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.error {
	color: red;
	font-size: 0.9em;
	margin-bottom: 10px;
	display: block;
}

button {
	padding: 10px 15px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

button:hover {
	background-color: #0056b3;
}

JavaScript

function empty_check(value) {
	return (value == null || value.trim() === "") ? 'invalid' : 'valid';
}

function min_check(value, minval) {
	return (value.length < minval) ? 'invalid' : 'valid';
}

function max_check(value, maxval) {
	return (value.length > maxval) ? 'invalid' : 'valid';
}

function minmax_check(value, minval, maxval) {
	return (value.length < minval || value.length > maxval) ? 'invalid' : 'valid';
}

function email_check(value) {
	var filter = /^[\w._%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
	return (!filter.test(value)) ? 'invalid' : 'valid';
}

function contact_check(value) {
	var filter = /^[0-9-+ ]+$/;
	return (!filter.test(value) || value.length < 10 || value.length > 16) ? 'invalid' : 'valid';
}

$(document).ready(function() {
	$('#contactForm').submit(function(event) {
		event.preventDefault();

		let name = $('#name').val();
		let email = $('#email').val();
		let phone = $('#phone').val();

		if (empty_check(name) === 'invalid') {
			$('#nameError').text('Name cannot be empty');
		} else {
			$('#nameError').text('');
		}

		if (email_check(email) === 'invalid') {
			$('#emailError').text('Invalid email format');
		} else {
			$('#emailError').text('');
		}

		if (contact_check(phone) === 'invalid') {
			$('#phoneError').text('Invalid phone number');
		} else {
			$('#phoneError').text('');
		}
	});
});