HTML / Javascript-checkValidity（）不显示需要的位置

Question

HTML和JS的新功能。我一直想弄清楚为什么在字段中未输入任何名称时却没有收到任何通知。有关其当前外观的快速视频：输入名称的视频我的代码正在寻找HTML：<!-- ================ form start ================= -->   <form class="form-search form-search-position">    <div class="container">      <div class="row">        <div class="col-sm gutters-19">          <div class="form-group">            <label for="FormControlSelect1">Fullständiga namn</label>            <input class="form-control" required id="namn" type="text" placeholder="Skriv in för- och efternamn..">          </div>        </div>      </div>      <div class="row">        <div class="col-sm gutters-19">          <div class="form-group">            <button class="button button-form" id="toggle" onsubmit="return false;" onclick="myFunction()" type="button">Beställning</button>          </div>        </div>      </div>    </div>  </form>  <!-- ================ form end ================= --> JS：<script>  function myFunction() {    var inpObj = document.getElementById("namn");    if (!inpObj.checkValidity()) { /** Kollar ifall namnet input är skriven **/      document.getElementById("toggle").innerHTML = inpObj.validationMessage;    } else {      var data = {'namn': namn.value}      var json = JSON.stringify(data) /** Konventera till JSON **/      let req = new XMLHttpRequest();      req.onreadystatechange = function() {        if (this.readyState == 4) {          if (this.status == 200) { /** Kollar ifall request response är 200 = OK **/            console.log("Response is looking good! [" + this.status + "]");          } else { /** Om det är inte OK. Skicka meddelande till användaren.  **/            console.log("Response is bad! [" + this.status + "] - Check if the server is on and connected!");            document.getElementById("toggle").innerHTML = "Gick ej att beställa!";            document.getElementById("toggle").disabled = true;          }        }      };基本上，问题在于，无论何时我不输入任何名称，都应该在边框上显示一个红色的“背景”，或者只是一个小的弹出窗口来告诉用户需要在此处输入名称。我怎样才能做到这一点？