<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<title>Homework #3 Prokhorova Anna</title>
</head>
<body>
<form action="" method="post" name="test" id="form">
<h1>Registration form</h1>
<label>
<input onchange="validation()" type="text" name="email" placeholder="Email" id="email">
<div class="invalid-input" id="email_inv"></div>
</label>
<br>
<label>
<input type="password" name="password" placeholder="Password">
</label>
<br>
<label>
<input type="password" name="confirmation" placeholder="Confirm password">
</label>
<br>
<div>
<input onclick="entrance()" type="button" name="submit" value="Register">
</div>
</form>
<script>
var error = false;
function validation() {
let email = form.email.value;
let email_inv = document.getElementById("email_inv");
let pattern = /(@)/;
if(!pattern.test(email)) {
error = "Your email isn't valid";
email_inv.innerHTML = `<span>${error}</span>`;
document.getElementById("email").style.border = "1px solid red";
}
else {
document.getElementById("email_inv").innerHTML = " ";
document.getElementById("email").style.border = "1px solid grey";
}
}
function entrance() {
if(!error)
document.location.reload(true);
}
</script>
</body>
</html>