4 Ways To Show Messages In HTML Forms (Simple Examples)

Once upon a time, a confused student couldn’t figure out how to do form checking and show a message to scold the users. Well, there are a number of ways to “show messages” in HTML forms, let Master Coffee walk you through some of the common ones. Let’s go.

 

CODE DOWNLOAD

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) DEFAULT HTML FORM MESSAGES

1A) FORM CHECKING

<form>
  <input type="text" required>
  <input type="email" required>
  <input type="number" required min="1" max="10" step="0.5">
  <input type="submit" value="Go">
</form>

This is the easiest method. You don’t have to do “anything special”, just specify the usual form checks – required min max step pattern. The browser will automatically show messages when the checks fail on form submit.

 

 

1B) CUSTOM MESSAGES

<!-- (PART A) HTML FORM -->
<form>
  <input id="fieldA" type="text" required>
  <input type="submit" value="Go">
</form>

<!-- (PART B) ATTACH CUSTOM CHECK MESSAGE -->
<script>
window.addEventListener("load", () => {
  let fieldA = document.getElementById("fieldA");
  fieldA.oninvalid = () => fieldA.setCustomValidity("Brah. Set this field.");
  fieldA.oninput = () => fieldA.setCustomValidity("");
});
</script>

This should be pretty self-explanatory.

• Set your own custom message on invalid input – FIELD.oninvalid = () => FIELD.setCustomValidity(MESSAGE).
• Just take note, you will have to manually erase the custom message when the user is typing – FIELD.oninput = () => FIELD.setCustomValidity("").

 

 

2) ALERT POPUP BOX

<!-- (PART A) HTML FORM -->
<form onsubmit="return check()">
  <input id="fieldA" type="text">
  <input type="submit" value="Go">
</form>

<!-- (PART B) MANUAL CHECK -->
<script>
function check () {
  // (B1) GET VALUE & TEXT DISPLAY
  let val = document.getElementById("fieldA").value,
  msg = "";

  // (B2) CHECKS
  if (val=="") {
    msg += "Fill in the field.";
  } else if (val.length<8) {
    msg += "Must be at least 8 characters.";
  }

  // (B3) RESULT
  if (msg=="") { return true; }
  else {
    alert(msg);
    return false;
  }
}
</script>

This is an old school method. Can’t say that it’s wrong, some people are still doing this… It is also the “foundation” for manual form checks.

1. Create the <form> as usual. Take note, we use a Javascript function to handle/check the submission – onsubmit="return check()".
2. This can be pretty intimidating to some beginners. But keep calm and look carefully, it’s very straightforward.
   • Run through each field, do your required checks.
   • Put all the messages in a var msg string.
   • If there are no errors, allow the form to submit as usual with return true.
   • If there are errors, show the message withalert(msg) and prevent form submit with return false.

 

 

3) INLINE FORM MESSAGES

<!-- (PART A) HTML FORM -->
<form onsubmit="return check()">
  <input id="fieldA" type="text">
  <div id="txtA" class="msg"></div>
  <input type="submit" value="Go">
</form>

 <!-- (PART B) MANUAL CHECK -->
<script>
function check () {
  // (B1) GET VALUE & TEXT DISPLAY
  let val = document.getElementById("fieldA").value,
  txt = document.getElementById("txtA"),
  pass = true;

  // (B2) CHECKS & MESSAGE
  if (val=="") {
    txt.innerHTML = "Fill in this field.";
    pass = false;
  } else if (val.length<8) {
    pass = false;
    txt.innerHTML = "Must be at least 8 characters.";
  } else {
    txt.innerHTML = "";
  }

  // (B3) RESULT
  return pass;
}
</script>

An alternative to popup boxes, directly place the messages in the form itself.

1. Still a regular form, but we insert an empty “message holder” <div id="txtA"> below the field.
2. Same old mechanics as previous example, but we directly insert the message into the form itself –  <div  id="txtA">.innerHTML = "MESSAGE".

 

 

4) POPUP DIALOG BOX

<!-- (PART A) DIALOG BOX -->
<dialog id="popup" onclick="this.close()"></dialog>

<!-- (PART B) HTML FORM -->
<form onsubmit="return check()">
  <input id="fieldA" type="text">
  <input type="submit" value="Go">
</form>

 <!-- (PART C) MANUAL CHECK -->
<script>
function check () {
  // (C1) GET VALUE & TEXT DISPLAY
  let val = document.getElementById("fieldA").value,
  msg = [];

  // (C2) CHECKS & MESSAGE
  if (val=="") {
    msg.push("Fill in the field.");
  } else if (val.length<8) {
    msg.push("Must be at least 8 characters.");
  }

  // (C3) RESULT
  if (msg.length==0) { return true; }
  else {
    let popup = document.getElementById("popup");
    popup.innerHTML = msg.join("<br>");
    popup.showModal();
    return false;
  }
}
</script>

Lastly, for those who want to customize their own “popup box”.

• Yes, HTML has a native <dialog>. You can customize it using CSS, unlike alert().
• Same old process as the previous example again. Do your checks, put the message into the <dialog>.
• If there are errors, show the dialog box with DIALOG.showModal(). You can close it with DIALOG.close().

 

 

THE END – HOW TO CUSTOMIZE DIALOG

That’s all for this short tutorial and sharing. One last bit for the confused ones before we end, how do we customize the dialog box? Well, just like any other elements. Follow up with your own studies of basic CSS:

• dialog { color: X; background: X; font-size: X; font-weight: X; padding: X; margin: X; border: X; }

 

CHEAT SHEET