<script>

function validateForm() {

  var x = document.forms["myForm"]["fname"].value;

  if (x == "") {

    alert("Name must be filled out");

    return false;

  }

}

</script>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>

  Name: <input type="text" name="fname">

  <input type="submit" value="Submit">

</form>

<script>

  function validateForm() {

    var x = document.forms["myForm"]["fname"].value;

    var errorSpan = document.getElementById("error-message");



    if (x == "") {

      errorSpan.innerHTML = "Name must be filled out";

      return false;

    } else {

      errorSpan.innerHTML = ""; // Очищаем сообщение об ошибке, если поле заполнено

      return true;

    }

  }

</script>



<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>

  Name: <input type="text" name="fname">

  <span id="error-message" style="color: red;"></span> <!-- Элемент для отображения сообщения об ошибке -->

  <br>

  <input type="submit" value="Submit">

</form>