function clearError(el) {
  document.getElementById("errorMessage-" + el.name).innerHTML = "";
}

function validateOneInput(el) {
  clearError(el);
  if (!el.value) {
    // display each error under input field
    document.getElementById("errorMessage-" + el.name).innerHTML =
      'The "' + el.name + '" field is empty';
    return false;
  } else if (el.name == "email" && el.value.indexOf("@") < 1) {
    // check for example if email field contains @ character
    document.getElementById("errorMessage-email").innerHTML =
      'The "email" field is invalid';
    return false;
  }
  return true;
}

function validate(el) {
  const form = document.forms["myform"];
  // add flag for error messages
  let validated = true;

  // check each of the field if any of them is empty
  for (let i = 0; i < form.length; i++) {
    // check individually all form elements except for submit input
    if (form[i].name !== "submit" && !validateOneInput(form[i])) {
      validated = false;
    }
  }
  return validated;
}

function submitForm() {
  if (validate()) {
    window.alert("form can be submitted");
  } else {
    window.alert("form can not be submitted");
  }
}