Demo: Validate a Text Input with JavaScript

This demo keeps the original purpose: submit the form with the text box empty to see client-side validation stop the submission. Enter text and submit again to pass the check.

HTML Used in the Demo Top ↑

<form id="textValidationDemo">
  <input type="text" id="textinput" name="textinput">
  <div id="my_msg" aria-live="polite"></div>
  <button type="submit">Submit</button>
</form>

JavaScript Used in the Demo Top ↑

const form = document.getElementById("textValidationDemo");
const input = document.getElementById("textinput");
const message = document.getElementById("my_msg");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (input.value.trim() === "") {
    message.textContent = "Fill the text box before submitting.";
    input.focus();
    return;
  }
  message.textContent = "Validation passed.";
});

← JavaScript validation tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: