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

要显示错误消息，您想要在输入元素下方插入一个元素，该元素的标准显示设置为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 ================= -->

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

1 个答案: