Simple JavaScript Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
input, textarea {
display: block;
margin: 2px;
}
</style>
</head>
<body>
<form id="form" action="" method="POST">
<div id="error"></div>
<div>
<label for="name">Username</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div>
<button class="button" type="submit">Submit</button>
</div>
</form>
<script>
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) => {
let = message = []
if (name.value === "" || name.value == null) {
message.push('Please enter username!')
}
if (password.value.length <= 6) {
message.push('Password must be longer than 6 charactrs')
}
if (password.value.length >= 15) {
message.push('Password must be less than 15 charactrs')
}
if (password.value === 'password') {
message.push('Password cannot be password')
}
if (message.length > 0) {
e.preventDefault()
errorElement.innerText = message.join(', ')
}
})
</script>
</body>
</html>
Document
Event Listener
