I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS.
Although the solution seems simple, I am struggling to figure out how to implement it.
The given code lacks documentation on how to achieve this. Do I need to create a separate div for the pop-up box and a function to trigger it? Perhaps by calling the function within the if statement?
I apologize if my explanation is unclear or doesn't make sense, as I am still relatively new to this (as you can probably tell).
Thank you in advance!
var requiredFields = [ "firstname", "lastname", "email", "message" ];
function checkContactForm() {
var theForm = document.forms[0];
for (var i in requiredFields) {
var fieldName = requiredFields[i];
if (!theForm[fieldName].value || theForm[fieldName].value == "Error") {
theForm[fieldName].style.color = "#f66";
theForm[fieldName].value = "Error";
var emptyFields = true;
}
}
if (!emptyFields) { theForm.submit(); }
}
function resetField(theField) {
if (theField.value == "Error") {
theField.value = "";
}
theField.style.color = "#000";
}