Scribd
Upload
7 views

Activity11

BHVIUI

Uploaded by

amanrajputjee122
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Activity11

BHVIUI

Uploaded by

amanrajputjee122
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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();

});

You might also like