check form requirements and then send data with ajax-CodePudding

I trying to send form data as json to my device (with XMLHttpRequest). My form have multi required fields, And should not submit if mandatory fields are empty. But form data sent even field empty! I search and add event.preventDefault(); but it's not work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first assignment</title>
    <script>
      function curlcheck() {
      event.preventDefault();
      event.stopImmediatePropagation();
        var user_id = document.getElementById("user_id").value;
        var pass = document.getElementById("password").value;
        var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
        var theUrl = "/submit_test";
        xmlhttp.open("POST", theUrl);
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //document.getElementById("ajax_res").innerHTML = this.responseText;
                console.log("success");
                }
        }
    }

    </script>
  </head>

  <body>
    <div ></div>
    <ul>
      <h3>Team 1 Online Exam System</h3>
    </ul>
    <form action="" method="POST">
      <div name="form header" >
        <h1>Welcome</h1>
        <p><span id="loginerr" ></span></p>
      </div>
      <div >
        <lable for="user_id">User ID</lable>
        <input type="text" placeholder="Enter User ID" id="user_id" required>

        <label for="password">Password</label>
        <input type="password" placeholder="Enter Password" id="password" required>

        <button id="but" type="submit" onclick="curlcheck(); return false">Login</button>

      </div>
    </form>
    <div >
    </div>

  </body>

</html>

CodePudding user response：

In HTML5, you do not need to check it by yourself, you can call the reportValidity() method to do the validation.

function curlcheck(form){
        var user_id = document.getElementById("user_id");
            var pass = document.getElementById("password");
  
        if (user_id.reportValidity() && pass.reportValidity()){
                  var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
                  var theUrl = "/submit_test";
                  xmlhttp.open("POST", theUrl);
                  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                  xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value }));
                  xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                    //document.getElementById("ajax_res").innerHTML = this.responseText;
                    console.log("success");
                    }
                }
               }
        return false;
    }

<form action="" method="POST" onclick="return curlcheck(this);">
      <div name="form header" >
        <h1>Welcome</h1>
        <p><span id="loginerr" ></span></p>
      </div>
      <div >
        <lable for="user_id">User ID</lable>
        <input type="text" placeholder="Enter User ID" id="user_id" required>

        <label for="password">Password</label>
        <input type="password" placeholder="Enter Password" id="password" required>

        <button>Login</button>

      </div>
    </form>

CodePudding user response：

If required data empty then return false from curlcheck function.

<script>
  function curlcheck(event) {
  event.preventDefault();
  event.stopImmediatePropagation();
    var user_id = document.getElementById("user_id").value;
    var pass = document.getElementById("password").value;

     if (user_id === "" || pass === "") {
       return false; //or show required message 
     }

    var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
    var theUrl = "/submit_test";
    xmlhttp.open("POST", theUrl);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            //document.getElementById("ajax_res").innerHTML = this.responseText;
            console.log("success");
            }
    }
}

</script>