Aman Kumar
12407063
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
padding: 10px;
font-size: 20px;
border: 1px solid #ccc;
border-radius: 10px;
.message{
font-size: 18px;
margin-top: 5px;
</style>
</head>
<body>
<form id="myform" action="home.html">
<label for="name">Name:</label>
<input type="text" id="name" onkeyup="validateName()" required>
<div class="message" id="nameMessage"></div>
<label for="email">Email:</label>
<input type="email" id="email" onekeyup="validateEmail()" required>
<div class="message" id="emailMessage"></div>
<label for="password">Password:</label>
<input type="password" id="password" onekeyup="validatepassword()" required>
<div class="message" id="passwordMessage"></div>
<input type="submit" value="submit form">
</form>
<script src="./form.js"></script>
</body>
</html>
function validateName(){
const name=document.getElementById("name").ariaValueMax;
const nameInput=document.getElementById("name");
const nameMessage=document.getElementById("nameMessage");
if(name.length >= 3){
nameInput.style.bordercolor="green";
nameMessage.textcontent="Name looks good";
nameMessage.style.color="green";
return True;
else{
nameInput.style.bordercolor="red";
nameMessage.textcontent="Name should be at least of 3 characters";
nameMessage.style.color="red";
return false;
function validateEmail(){
const email=document.getElementById("email").Value;
const emailInput=document.getElementById("email");
const emailMessage=document.getElementById("emailMessage");
const emailpattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if(emailpattern.test(email)){
emailInput.style.bordercolor="green";
emailMessage.textcontent="valid email";
emailMessage.style.color="green";
return True;
else{
emailInput.style.bordercolor="red";
emailMessage.textcontent="Enter a valid Email address";
emailMessage.style.color="red";
return false;
function validatepassword(){
const password=document.getElementById("name").ariaValueMax;
const passwordInput=document.getElementById("name");
const passwordMessage=document.getElementById("nameMessage");
if(password.length >= 6){
passwordInput.style.bordercolor="green";
passwordMessage.textcontent="strong password";
passwordMessage.style.color="green";
return True;
else{
passwordInput.style.bordercolor="red";
passwordMessage.textcontent="Password should be at least of 6 characters";
passwordMessage.style.color="red";
return false;
}
document.getElementById("myform").addEventListener("submit", function(event){
const isvalidName = validateName();
const isvalidEmail = validateEmail();
const isvalidPassword = validatePassword();
if(!isvalidName || !isvalidEmail || !isvalidPassword){
event.preventDefault();
});
