index.js :
let notesObj = []
let htmlData;
const validate = () => {
let form1 = document.querySelectorAll("#form1")
let inputname = document.getElementById("inputname").value.trim()
let pass = document.getElementById("pass").value.trim()
let email = document.getElementById("email").value.trim()
let myObj = {
nameObj: inputname,
passObj: pass,
emailObj: email
};
notesObj.push(myObj);
console.log(notesObj);
notesObj.forEach((ele, ind) => {
htmlData = ` User ${ind}: <br>
${ele.nameObj} <br>
${ele.passObj} <br>
${ele.emailObj}
<br> <br>`
})
document.getElementById("demo").innerHTML += htmlData
}
form1.addEventListener('submit', (e) => {
e.preventDefault();
validate();
})
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="prac.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Form validation</h1>
<!-- <form id="form1" onsubmit="event.preventDefault(); formsubmit();"> -->
<form id="form1">
<input type="text" id="inputname" class="formdata" placeholder="enter your name"> <br>
<input type="password" id="pass" class="formdata" placeholder="enter your password"><br>
<input type="email" id="email" class="formdata" placeholder="enter your email"><br>
<button type="submit">Submit</button>
</form>
<p id="demo">
</p>
</div>
<script src=" prac.js"></script>
</body>
</html>
0 Comments