<form onsubmit="return validate()" action="">
  <label for="your-name">Your name:</label>
  <input type="text" id="your-name" name="Name">
  <p id="name-required">Your name is required</p>
  <p id="fail-message" style="visibility:hidden">Please complete the form</p>
  <button id="submit">Submit</button>
</form>
p{
  color:red;
} 
#name-required{
  display:inline;
  visibility:hidden;
}
#fail-message{
  color:red;
function validate() {
  if (
    document.getElementById("your-name").value == "" &&
    document.getElementById("fail-message").style.visibility == "hidden"
  ) {
    document.getElementById("name-required").style.visibility = "visible";
    document.getElementById("fail-message").style.visibility = "visible";
    document.getElementById("submit").innerText =
      "Submit Disregarding Error(s)";
    return false;
  }
  return true;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.