Ajax-запрос всегда возвращает true

Question

У меня есть следующий AJAX-скрипт, но по какой-то причине он не возвращает false, поэтому форма может продолжаться;всегда возвращает true.

<form action="check.html" onsubmit="return LoginValidation()" method="post"> 

    function LoginValidation(){  
    var username = document.getElementById("username").value;   
    var password = document.getElementById("pass1").value;   
    var errormsg = document.getElementsByClassName("error-msg");   
    var userError = document.getElementsByClassName("userError");    

    var req;
    if(username!="" && password!=""){
        req = new XMLHttpRequest();        
        req.onreadystatechange = function(){            
            if(req.readyState==4 && req.status==200){
                var returntxt = req.responseText;
                if(returntxt.length=="20"){
                    alert("working");
                }
                else{                    
                    alert("not working");
                    return false;
                 }
            }            
        };
        req.open("POST","LoginCntrl",true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send("username="+username+"&password="+password);

    }
}

Answer 1

Немного по-другому с JS слушателем. Кроме того, есть ли проблема с тем, что вы получаете от вызова AJAX, когда вы действительно отправляете данные? У вас есть «alert (« not working »)» в обработчике ответа. Что ты на самом деле возвращаешь в returntxt?

HTML

<form id = "validationform"> 
<input id="username" name="username">
<input id="pass1" name="pass1">
<input type="submit" style="display:none"/>
<span class="error-msg"></span>
<span class="userError"></span>
</form>

JS

document.getElementById("validationform").addEventListener("submit", function(event){

    event.preventDefault();
    var username = document.getElementById("username").value;   
    var password = document.getElementById("pass1").value;   
    var errormsg = document.getElementsByClassName("error-msg");   
    var userError = document.getElementsByClassName("userError");    


    var req;

    if(username !="" && password !=""){
        req = new XMLHttpRequest();        
        req.onreadystatechange = function(){            
            if(req.readyState==4 && req.status==200){
                var returntxt = req.responseText;
                if(returntxt.length=="20"){
                    alert("working");
                }
                else{                    
                    alert("not working");
                    return false;
                 }
            }            
        };
        req.open("POST","LoginCntrl",true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send("username="+username+"&password="+password);

    }
    else {
    this.querySelector(".error-msg").innerHTML = "Please enter username and password";
        //return false;
    }
});

Возможно, вы захотите получить учетную запись https://jsfiddle.net или https://codepen.io/.

Answer 2

Вы не вернули false в своем коде javascript и в своем теге <form> нет необходимости добавлять action="", потому что вам нужно запретить форму для submit, если ваша функция return false. код, который я добавил if-else, чтобы проверить, являются ли поля empty or not, иначе форма получит submitted .ie:

function LoginValidation(){  
    var username = document.getElementById("username").value;   
    var password = document.getElementById("pass1").value;   
    //var errormsg = document.getElementsByClassName("error-msg");   
    //var userError = document.getElementsByClassName("userError");    
 
    var req;
    if(username== "" || password== "")
    {
     
      alert("not working");
    return false;
    
    }
    else{
      alert("submitting");
    req = new XMLHttpRequest();        
        req.onreadystatechange = function(){            
            if(req.readyState==4 && req.status==200){
                var returntxt = req.responseText;
                if(returntxt.length=="20"){
                   // alert("working");
                }
                else{                    
                    //alert("not working");
                    return false;
                 }
            }            
        };
        req.open("POST","LoginCntrl",true);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.send("username="+username+"&password="+password);
    
    }
        

   
}

<form onsubmit="return LoginValidation()" method="post" >
  <input type="text" id="username">
  <input type="text" id="pass1">
  <input type="submit">
</form>