Javascript, Web Page Not Calling Function

Question

I have a basic form, and I am trying to make some event listeners come up if you click away without answering, but my webpage is not seeming to call the function and I do not know why. As of right now it will just submit even if nothing is actually typed in. I have also tried to put the call for the script at the top of the HTML page with a "defer" and at the bottom but it still wont load

function resetProfile(e) {
 //document.forms[0].reset(); //no need to reset the form event by default clears input
 fNameError.innerHTML = '';
 lNameError.innerHTML = '';
 addressError.innerHTML = '';
 provinceError.innerHTML = '';
 countryError.innerHTML = '';
 emailError.innerHTML = '';
 phoneError.innerHTML = '';
 usernameError.innerHTML = '';
 passwordError.innerHTML = '';
}
function validateProfile(e) {
 var valid = true;
 //display warning if firstName is not entered
 if (profile.firstName.value === "") {
 fNameError.innerHTML = 'Please enter a First Name';
 valid = false;
 }
 //display warning if lastName is not entered
 if (profile.lastName.value === "") {
 lNameError.innerHTML = 'Please enter a Last Name';
 valid = false;
 }
 //display warning if address1 is not entered
 if (profile.address.value === "") {
 address1Error.innerHTML = 'Please enter address ';
 valid = false;
 }
 //display warning if city is not entered
 if (profile.province.value === "") {
 provinceError.innerHTML = 'Please enter a province';
 valid = false;
 }
 //display warning if province is not selected
 if (profile.country.value === "") {
 countryError.innerHTML = 'Please enter a Country';
 valid = false;
 }
 //display warning if country is not selected
 if (profile.email.value === "") {
 emailError.innerHTML = 'Please enter a valid email';
 valid = false;
 }
 if (profile.phone.value === "") {
 phoneError.innerHTML = 'Please enter a valid email';
 valid = false;
 }
 if (profile.username.value === "") {
 usernameError.innerHTML = 'Please enter a valid email';
 valid = false;
 }
 if (profile.password.value === "") {
 passwordError.innerHTML = 'Please enter a valid email';
 valid = false;
 }
 if (!valid) {
 // Then we prevent the form from being submitted/sent by canceling the event
 event.preventDefault();
 }
 //else alert("Thank you");
 return valid;
};
//form element events
//clear the warning message when the firstName is entered
document.querySelector('#fName').addEventListener("blur", function() {
 if (this.value !== "") {
 fNameError.innerHTML = "";
 }
});
//clear the warning message when the lastName is entered
document.querySelector('#lName').addEventListener("blur", function() {
 if (this.value !== "") {
 lNameError.innerHTML = "";
 }
});
//clear the warning message when the address1 is entered
document.querySelector('#address').addEventListener("blur", function() {
 if (this.value !== "") {
 addressError.innerHTML = "";
 }
});
document.querySelector('#province').addEventListener("blur", function() {
 if (this.value !== "") {
 provinceError.innerHTML = "";
 }
});
document.querySelector('#country').addEventListener("blur", function() {
 if (this.value !== "") {
 countryError.innerHTML = "";
 }
});
document.querySelector('#email').addEventListener("blur", function() {
 if (this.value !== "") {
 emailError.innerHTML = "";
 }
});
document.querySelector('#phone').addEventListener("blur", function() {
 if (this.value !== "") {
 phoneError.innerHTML = "";
 }
});
document.querySelector('#username').addEventListener("blur", function() {
 if (this.value !== "") {
 usernameError.innerHTML = "";
 }
});
document.querySelector('#password').addEventListener("blur", function() {
 if (this.value !== "") {
 passwordError.innerHTML = "";
 }
});
//Add a submit event listener to the form to invoke the validateProfile() method when the form submi 
document.profile.addEventListener("submit", validateProfile);
//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.profile.addEventListener("reset", resetProfile)

<form name="profile">
 <input type="text" id="fname" name="firstName" value="FirstName"><br><br>
 <span class="alert" id="fNameError"></span>
 <input type="text" id="lname" name="lastName" value="Last Name"><br><br>
 <span class="alert" id="lNameError"></span>
 <input type="text" id="address" name="address" value="Address"><br><br>
 <span class="alert" id="addressError"></span>
 <input type="text" id="Province" name="province" value="Province"><br><br>
 <span class="alert" id="provinceError"></span>
 <input type="text" id="country" name="country" value="Country"><br><br>
 <span class="alert" id="countryError"></span>
 <input type="email" id="email" name="email" value="Email"><br><br>
 <span class="alert" id="emailerror"></span>
 <input type="tel" id="phone" name="phone" value="Phone Number"><br><br>
 <span class="alert" id="phoneError"></span>
 <input type="text" id="username" name="username" value="Username"><br><br>
 <span class="alert" id="usernameError"></span>
 <input type="password" id="pwd" name="password" value="Password"><br><br>
 <span class="alert" id="passwordError"></span>
 <input type="submit" value="Submit"><input type="reset" value="Reset">
</form>

• SuperDJ: Why don't you simply use the required attribute if only checking for empty input?
• mplungjan: Your snippet gives very clear error messages
• mykaf: Where are variables such as fNameError defined?
• mplungjan: e.preventDefault() not event.preventDefault()

Answer 1

Many issues

IDs not correct

values are not empty because you should have used placeholder etc

event.preventDefault vs e.preventDefault

DRY: Don't repeat yourself - we could shorten this even more with consistent fieldnames

This works. Adding required to the fields would have been simpler

const resetAlerts = () => {
 document.querySelectorAll(".alert").forEach(span => span.classList.add("hide"));
};
const validateProfile = (e) => {
 resetAlerts()
 let valid = true;
 
 //display warning if firstName is not entered
 if (document.getElementById('fname').value === "") {
 document.getElementById('fNameError').classList.remove("hide")
 valid = false;
 }
 //display warning if lastName is not entered
 if (document.getElementById('lname').value === "") {
 document.getElementById('lNameError').classList.remove("hide")
 valid = false;
 }
 //display warning if address1 is not entered
 if (document.getElementById('address').value === "") {
 document.getElementById('addressError').classList.remove("hide")
 valid = false;
 }
 //display warning if city is not entered
 if (document.getElementById('province').value === "") {
 document.getElementById('provinceError').classList.remove("hide")
 valid = false;
 }
 //display warning if province is not selected
 if (document.getElementById('country').value === "") {
 document.getElementById('countryError').classList.remove("hide")
 valid = false;
 }
 //display warning if country is not selected
 if (document.getElementById('email').value === "") {
 document.getElementById('emailError').classList.remove("hide")
 valid = false;
 }
 if (document.getElementById('phone').value === "") {
 document.getElementById('phoneError').classList.remove("hide")
 valid = false;
 }
 if (document.getElementById('username').value === "") {
 document.getElementById('usernameError').classList.remove("hide")
 valid = false;
 }
 if (document.getElementById('pwd').value === "") {
 document.getElementById('passwordError').classList.remove("hide")
 valid = false;
 }
 if (!valid) {
 // Then we prevent the form from being submitted/sent by canceling the event
 e.preventDefault();
 }
};
//Add a submit event listener to the form to invoke the validateProfile() method when the form submi 
document.getElementById("profile").addEventListener("submit", validateProfile);
//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.getElementById("profile").addEventListener("reset", resetAlerts);

span.alert.hide {
 display: none;
}

<form id="profile">
 <input type="text" id="fname" name="firstName" placeholder="FirstName">
 <span class="alert hide" id="fNameError">Please enter a First Name</span><br><br>
 <input type="text" id="lname" name="lastName" placeholder="Last Name">
 <span class="alert hide" id="lNameError">Please enter a Last Name</span><br><br>
 <input type="text" id="address" name="address" placeholder="Address">
 <span class="alert hide" id="addressError">Please enter address</span><br><br>
 <input type="text" id="province" name="province" placeholder="Province">
 <span class="alert hide" id="provinceError">Please enter a province</span><br><br>
 <input type="text" id="country" name="country" placeholder="Country">
 <span class="alert hide" id="countryError">Please enter a Country</span><br><br>
 <input type="email" id="email" name="email" placeholder="Email">
 <span class="alert hide" id="emailError">Please enter a valid email</span><br><br>
 <input type="tel" id="phone" name="phone" placeholder="Phone Number">
 <span class="alert hide" id="phoneError">Please enter a valid phone number</span><br><br>
 <input type="text" id="username" name="username" placeholder="Username">
 <span class="alert hide" id="usernameError">Please enter a valid username</span><br><br>
 <input type="password" id="pwd" name="password" placeholder="Password">
 <span class="alert hide" id="passwordError">Please enter a valid password</span><br><br>
 <input type="submit" placeholder="Submit"><input type="reset" placeholder="Reset" id="reset">
</form>

Answer 2

You have multiple errors regarding naming of id. Like lName in JS but lname in HTML or pwd in JS and password in HTML. Also because you're only checking against empty fields you could use the required HTML attribute.

Also you should put the event.preventDefault(); at the start of the method. Just to be sure that your code is used. Oh and it is e.preventDefault() as e is the parameter name in function validateProfile(e).

function resetProfile(e) {
 //document.forms[0].reset(); //no need to reset the form event by default clears input
 fNameError.innerHTML = '';
 lNameError.innerHTML = '';
 addressError.innerHTML = '';
 provinceError.innerHTML = '';
 countryError.innerHTML = '';
 emailError.innerHTML = '';
 phoneError.innerHTML = '';
 usernameError.innerHTML = '';
 passwordError.innerHTML = '';
}
function validateProfile(e) {
// Then we prevent the form from being submitted/sent by canceling the event
 e.preventDefault(); // It is e not event. put it here to make sure your code is used
var valid = true;
//display warning if firstName is not entered
if (profile.firstName.value === "") {
 fNameError.innerHTML = 'Please enter a First Name';
 valid = false;
}
//display warning if lastName is not entered
if (profile.lastName.value === "") {
 lNameError.innerHTML = 'Please enter a Last Name';
 valid = false;
}
//display warning if address1 is not entered
if (profile.address.value === "") {
 address1Error.innerHTML = 'Please enter address ';
 valid = false;
}
//display warning if city is not entered
if (profile.province.value === "") {
 provinceError.innerHTML = 'Please enter a province';
 valid = false;
}
//display warning if province is not selected
if (profile.country.value === "") {
 countryError.innerHTML = 'Please enter a Country';
 valid = false;
}
 //display warning if country is not selected
if (profile.email.value === "") {
 emailError.innerHTML = 'Please enter a valid email';
 valid = false;
}
if (profile.phone.value === "") {
 phoneError.innerHTML = 'Please enter a valid email';
 valid = false;
}
if (profile.username.value === "") {
 usernameError.innerHTML = 'Please enter a valid email';
 valid = false;
}
if (profile.password.value === "") {
 passwordError.innerHTML = 'Please enter a valid email';
 valid = false;
}
};
//form element events
//clear the warning message when the firstName is entered
document.querySelector('#fname').addEventListener("blur", function(){
 if (this.value !== ""){
 fNameError.innerHTML = "";
}
});
//clear the warning message when the lastName is entered
// It is lname not lName
document.querySelector('#lname').addEventListener("blur", function(){
if (this.value !== ""){
 lNameError.innerHTML = "";
}
});
//clear the warning message when the address1 is entered
document.querySelector('#address').addEventListener("blur", function(){
if (this.value !== ""){
 addressError.innerHTML = "";
}
});
document.querySelector('#province').addEventListener("blur", function(){
if (this.value !== ""){
 provinceError.innerHTML = "";
}
 });
document.querySelector('#country').addEventListener("blur", function(){
if (this.value !== ""){
 countryError.innerHTML = "";
}
});
document.querySelector('#email').addEventListener("blur", function(){
if (this.value !== ""){
 emailError.innerHTML = "";
}
 });
document.querySelector('#phone').addEventListener("blur", function(){
if (this.value !== ""){
 phoneError.innerHTML = "";
}
});
document.querySelector('#username').addEventListener("blur", function(){
if (this.value !== ""){
 usernameError.innerHTML = "";
}
});
// It is pwd in html and it should be here
document.querySelector('#pwd').addEventListener("blur", function(){
if (this.value !== ""){
 passwordError.innerHTML = "";
}
});
//Add a submit event listener to the form to invoke the validateProfile() method when the form submi 
document.profile.addEventListener("submit", validateProfile);
//Add a reser event listener to the form to invoke the resetProfile() method when the form is reset
document.profile.addEventListener("reset", resetProfile)

<form name = "profile">
 <input type="text" id="fname" name="firstName" value = "FirstName" required><br><br>
 <span class="alert" id="fNameError"></span>
 
 <input type="text" id="lname" name="lastName" value = "Last Name" required><br><br>
 <span class="alert" id="lNameError"></span>
 <input type="text" id="address" name="address" value = "Address" required><br><br>
 <span class="alert" id="addressError"></span>
 <input type="text" id="province" name="province" value= "Province" required><br><br>
 <span class="alert" id="provinceError"></span>
 <input type="text" id="country" name="country" value = "Country" ><br><br>
 <span class="alert" id="countryError"></span>
 <input type="email" id="email" name="email" value = "Email"><br><br>
 <span class="alert" id="emailerror"></span>
 <input type="tel" id="phone" name="phone" value = "Phone Number"><br><br>
 <span class="alert" id="phoneError"></span>
 <input type="text" id="username" name="username" value = "Username"><br><br>
 <span class="alert" id="usernameError"></span>
 
 <input type="password" id="pwd" name="password" value = "Password"><br><br> 
 <span class="alert" id="passwordError"></span>
 <input type="submit" value="Submit"><input type="reset" value="Reset">
 
 </form>

• mplungjan: You missed a few :) Also value should be placeholder or all fields are filled - see my answer
• SuperDJ: @mplungjan didn't want to make it copy paste for the OP. I mean I think the OP would learn more from figuring it out on their own with the help of some suggestions of where to look