Scribd
Upload
4 views

Act12

The document contains an HTML form for user input with fields for username, email, and password, along with validation messages for each field. It uses jQuery to validate the form on submission, ensuring that the username is not empty, the email is in a valid format, and the password is at least 6 characters long. If the form is valid, a success message is displayed and the form resets.

Uploaded by

dhirendrahudda679
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
4 views

Act12

The document contains an HTML form for user input with fields for username, email, and password, along with validation messages for each field. It uses jQuery to validate the form on submission, ensuring that the username is not empty, the email is in a valid format, and the password is at least 6 characters long. If the form is valid, a success message is displayed and the form resets.

Uploaded by

dhirendrahudda679
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

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Form Validation</title>

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

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

</head>

<body class="bg-gray-100 flex items-center justify-center min-h-screen">

<form id="myForm" class="bg-white p-8 rounded shadow-md w-full max-w-md">

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

<div class="mb-4">

<label for="name" class="block text-gray-700 mb-2">Username</label>

<input type="text" id="name" name="name" class="w-full px-4 py-2 border rounded


focus:outline-none focus:ring-2 focus:ring-blue-400" />

<p class="text-red-500 text-sm mt-1 hidden" id="nameError">Username is required</p>

</div>

<div class="mb-4">

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

<input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded


focus:outline-none focus:ring-2 focus:ring-blue-400" />

<p class="text-red-500 text-sm mt-1 hidden" id="emailError">Enter a valid email</p>

</div>

<div class="mb-6">

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


<input type="password" id="password" name="password" class="w-full px-4 py-2 border rounded
focus:outline-none focus:ring-2 focus:ring-blue-400" />

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


characters</p>

</div>

<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600


transition">Submit</button>

</form>

<script>

$(document).ready(function () {

$("#myForm").submit(function (e) {

e.preventDefault();

let isValid = true;

const Username = $("#name").val().trim();

const email = $("#email").val().trim();

const password = $("#password").val().trim();

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

if (Username === "") {

$("#nameError").show();

isValid = false;

} else {

$("#nameError").hide();

if (!emailRegex.test(email)) {

$("#emailError").show();

isValid = false;
} else {

$("#emailError").hide();

if (password.length < 6) {

$("#passwordError").show();

isValid = false;

} else {

$("#passwordError").hide();

if (isValid) {

alert("Form submitted successfully!");

$("#myForm")[0].reset();

});

});

</script>

</body>

</html>
Output :

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy