Есть несколько опечаток, и я предложу еще кое-что. Во-первых, исправление или три в коде:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewPatientForm</title>
<script>
function validate() {
const invalid = document.getElementById("Firstname").value.length == 0;
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false; //to make the text appear
}
return true;
}
</script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
</body>
</html>
Я предлагаю вам также взглянуть на встроенные HTML атрибуты проверки формы. Я думаю, что вы изобретаете колесо для таких вещей, как требование непустого имени. Почему бы не это вместо JavaScript?
<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />
и многих других, например minlength = "", min = "", step = "", et c.
Plus все еще есть JavaScript хук в систему проверки с помощью .checkValidity (), так что вы можете позволить встроенной проверке выполнить тяжелую работу, а затем добавить больше ваших собственных пользовательских аспектов.