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

您没有在JavaScript代码中返回false，在<form>标签中也无需添加action=""，因为如果发生以下情况，您需要阻止将表单添加到submit您的函数return false。在下面的代码中，我添加了if-else来检查字段是否为empty or not，否则表单将得到submitted。即：

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>

Answer 2

与JS侦听器略有不同。此外，在实际提交数据时，您从AJAX调用中得到的返回信息是否存在问题？您在响应处理程序中具有“ alert（“不工作”））'。您实际上在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/帐户。

Ajax请求始终返回true

2 个答案: