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

Question

New into HTML and JS. I have been trying to figure out why I am not getting any notification while I am not entering any Name in a field. a quick video of how it is looking currently: VIDEO of entering name

My code is looking

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

Basically the issue is that whenever I do not enter any name, it is supposed to either it shows a red "background" on the border or just a small popout to tell the user that it is required to enter a Name here.

How can I do that?

Answer 1

When you are checking the validity of the name input object in the following if statement:

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

You set submit button text to the validation message. What you wanna do is take your input object (inpObj) and change the background color. This can be done as follows:

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

For the display of an error message you want to insert a element below the input element that has a standard display set to none as below:

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

You can than toggle the display as needed by doing the following in your function:

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

You can find a snippet below:

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