javascript - HTML/Javascript - checkValidity() 未显示需要的位置

Question

HTML 和 JS 新手。我一直在试图弄清楚为什么当我没有在字段中输入任何名称时我没有收到任何通知。当前外观的快速视频:VIDEO of entering name

我的代码正在查找

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;
          }
        }
      };

      req.open("post", "https://localhost:44363/api/values"); 
      req.setRequestHeader("content-type", "application/json");
      req.send(json);
      document.getElementById("toggle").innerHTML = "Tack för beställning";
      document.getElementById("toggle").disabled = true;

      setTimeout(function(){
       window.location.reload(1);
     }, 5000);

    } 
  } 

</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;
        }
      }
    };

    req.open("post", "https://localhost:44363/api/values");
    req.setRequestHeader("content-type", "application/json");
    req.send(json);
    document.getElementById("toggle").innerHTML = "Tack för beställning";
    document.getElementById("toggle").disabled = true;

    setTimeout(function() {
      window.location.reload(1);
    }, 5000);

  }
}

<!-- ================ 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 ================= -->

基本上，问题是，每当我不输入任何名称时，它都应该在边框上显示红色“背景”，或者只是一个小弹出窗口，告诉用户需要在此处输入名称。

我怎样才能做到这一点？

Answer 1

当您在以下 if 语句中检查名称输入对象的有效性时:

  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
    }
  }

您将提交按钮文本设置为验证消息。您想要做的就是获取输入对象(inpObj)并更改背景颜色。这可以按如下方式完成:

  var inpObj = document.getElementById("namn");
  if (!inpObj.checkValidity()) { /** Kollar ifall namnet input är skriven **/
    inpObj.style.backgroundColor = "red";
  } else {
    var data = {
      'namn': namn.value;
    }
    inpObj.style.backgroundColor = "none";
 }

为了显示错误消息，您需要在标准显示设置为无的输入元素下方插入一个元素，如下所示:

    <input class="form-control" required id="namn" type="text" placeholder="Skriv in för- och efternamn..">
    <div id="error-message" style="display:none">Please fill in your name</div>

您可以根据需要通过在函数中执行以下操作来切换显示:

var errorMessage = document.getElementById("error-message");
errorMessage.style.display = "block";

您可以在下面找到一个片段:

function myFunction() {

  var inpObj = document.getElementById("namn");
  if (!inpObj.checkValidity()) { /** Kollar ifall namnet input är skriven **/
    inpObj.style.backgroundColor = "red";
    var errorMessage = document.getElementById("error-message");
    errorMessage.style.display = "block";
  } else {
    inpObj.style.backgroundColor = "none";
    var errorMessage = document.getElementById("error-message");
    errorMessage.style.display = "none";
    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;
        }
      }
    };

    req.open("post", "https://localhost:44363/api/values");
    req.setRequestHeader("content-type", "application/json");
    req.send(json);
    document.getElementById("toggle").innerHTML = "Tack för beställning";
    document.getElementById("toggle").disabled = true;

    setTimeout(function() {
      window.location.reload(1);
    }, 5000);

  }
}

<!-- ================ 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 id="error-message" style="display:none">Please fill in your name</div>
          </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 ================= -->