Scribd
Upload
6 views4 pages

Activity 12

This document is an HTML template for a form validation system using jQuery and Tailwind CSS. It includes a form with fields for username, email, and password, along with corresponding validation messages that are displayed when the fields are not filled out correctly. The jQuery script handles form submission and real-time validation, ensuring that users receive immediate feedback on their input.

Uploaded by

jashandeep20555
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

Activity 12

This document is an HTML template for a form validation system using jQuery and Tailwind CSS. It includes a form with fields for username, email, and password, along with corresponding validation messages that are displayed when the fields are not filled out correctly. The jQuery script handles form submission and real-time validation, ensuring that users receive immediate feedback on their input.

Uploaded by

jashandeep20555
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation with jQuery</title>

<!-- Tailwind CSS CDN -->

<script src="https://cdn.tailwindcss.com"></script>

<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body class="bg-gray-100 p-6">

<div class="max-w-md mx-auto bg-white p-8 rounded-xl shadow-lg">

<h2 class="text-2xl font-bold mb-4 text-gray-800">Form Validation</h2>

<!-- Form -->

<form id="userForm">

<div class="mb-4">

<label for="username" class="block text-gray-700">Username:</label>

<input type="text" id="username" name="username" class="w-full p-2 border rounded"


placeholder="Enter username">

<span class="text-red-500 text-sm hidden" id="usernameError">Username is


required</span>

</div>

<div class="mb-4">

<label for="email" class="block text-gray-700">Email:</label>

<input type="email" id="email" name="email" class="w-full p-2 border rounded"


placeholder="Enter email">

<span class="text-red-500 text-sm hidden" id="emailError">Valid email is required</span>

</div>
<div class="mb-4">

<label for="password" class="block text-gray-700">Password:</label>

<input type="password" id="password" name="password" class="w-full p-2 border


rounded" placeholder="Enter password">

<span class="text-red-500 text-sm hidden" id="passwordError">Password must be at least 6


characters</span>

</div>

<button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-


600">Submit</button>

</form>

</div>

<!-- jQuery Validation Script -->

<script>

$(document).ready(function() {

// Click Event for Form Submission

$('#userForm').on('submit', function(e) {

e.preventDefault();

let isValid = true;

// Username validation

if ($('#username').val().trim() === '') {

$('#usernameError').removeClass('hidden');

isValid = false;

} else {

$('#usernameError').addClass('hidden');

// Email validation

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;


if (!emailPattern.test($('#email').val())) {

$('#emailError').removeClass('hidden');

isValid = false;

} else {

$('#emailError').addClass('hidden');

// Password validation

if ($('#password').val().length < 6) {

$('#passwordError').removeClass('hidden');

isValid = false;

} else {

$('#passwordError').addClass('hidden');

if (isValid) {

alert('Form submitted successfully!');

});

// Change Event for Real-time Validation

$('input').on('change', function() {

const inputId = $(this).attr('id');

if ($(this).val().trim() === '') {

$('#' + inputId + 'Error').removeClass('hidden');

} else {

$('#' + inputId + 'Error').addClass('hidden');

});

});

</script>
</body>

</html>

You might also like