I have a signup form that I have created and I want to check if the username input has text in it and print an error message but my js code doesn't work I tried to check if the username input have text in it and then give the error message value and some CSS to show it
let firstName = document.getElementById('fName').value;
let lastName = document.getElementById('lName').value;
let userName = document.getElementById('userName').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password');
function CheckForm() {
let check = true;
if (!CheckMyName()) {
check = false;
}
return check;
}
function CheckMyName() {
let checkName = true;
if (userName == "") {
document.getElementById('messageName').value = "you must enter a name";
document.getElementById('messageName').style.display = "inline";
checkName = false;
}
else{
document.getElementById('messageName').style.display = "none";
}
return checkName;
}<!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">
<title></title>
</head>
<body>
<div id="container">
<form id="signup" method="post" name="signup" runat="server" onsubmit="return CheckForm()">
<h1>create an account</h1>
<br />
first name <input type="text" id="fName" name="fName" />
<label id="messageName" class="errorMessage" name="msgName"></label>
<br /> <br />
last name <input type="text" id="lName" name="lName" /> <br /> <br />
username <input type="text" id="userName" name="userName" /> <br /> <br />
email <input type="email" id="email" name="email" /> <br /> <br />
password <input type="password" id="password" name="password" /> <br /> <br />
phone <input type="tel" id="phone" name="phone" /> <br /> <br />
<input type="submit" id="submit" name="submit" value="create" />
<script src="main.js"></script>
</body>
</html>I added a div for the error
const firstName = document.getElementById("fName").value;
const lastName = document.getElementById("lName").value;
const userNameField = document.getElementById("userName");
const email = document.getElementById("email").value;
const password = document.getElementById("password");
const errorMsg = document.getElementById("errorMsg");
function CheckForm() {
return CheckMyName();
}
function CheckMyName() {
let checkName = true;
const userName = userNameField.value;
if (userName == "") {
errorMsg.innerText = "you must enter a name";
checkName = false;
} else {
errorMsg.innerText = "";
}
return checkName;
}<div id="container">
<form id="signup" method="post" name="signup" runat="server" onsubmit="return CheckForm()">
<h1>create an account</h1>
<br />
first name <input type="text" id="fName" name="fName" />
<label id="messageName" class="errorMessage" name="msgName"></label>
<br /> <br />
last name <input type="text" id="lName" name="lName" /> <br /> <br />
username <input type="text" id="userName" name="userName" /> <br /> <br />
email <input type="email" id="email" name="email" /> <br /> <br />
password <input type="password" id="password" name="password" /> <br /> <br />
phone <input type="tel" id="phone" name="phone" /> <br /> <br />
<input type="submit" id="submit" name="submit" value="create" />
</form>
<div id="errorMsg"></div>
</div>