ana_ok,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A checkbox</title>
</head>
<body>
<label for="name">Name</label>
<input id="name" placeholder="Name">
<label>
<input id="consent" type="checkbox">
I agree
</label>
<input id="send" type="button" value="Submit" disabled="disabled">
<p id="greeting"></p>
<div id="errors" style="color: red;">
<p>Error:</p>
<ul>
<li id="name-error">Please enter a name</li>
<li id="consent-error">Please give consent</li>
</ul>
</div>
<script>
let txt = document.getElementById("name")
let but = document.getElementById("send")
let out = document.getElementById("greeting")
let divv = document.getElementById("errors")
let nameError = document.getElementById("name-error")
let consError = document.getElementById("consent-error")
let cons = document.getElementById("consent")
function verification() {
let check = !!cons.checked,
value = !!txt.value.trim();
nameError.hidden = value;
consError.hidden = check;
divv.hidden = value && check;
but.disabled = !divv.hidden;
}
txt.addEventListener("input", verification);
cons.addEventListener("input", verification);
function fun() {
out.textContent = "Hey " + txt.value + "!"
}
but.addEventListener("click", fun);
</script>
</body>
</html>