onsubmit返回false,但仍然执行提交

时间:2016-05-05 12:21:24

标签: javascript ajax forms

我又迷路了。我有一个带有三个JS函数的注册表单,当我从html表单调用onchange时会生成所需的输出。因此,当用户填写表单时,他们会生成BS警报。这些是三个功能:

检查密码长度:

function checkPassword() {
    var x = document.registerForm;
    var wachtwoord = x.wachtwoord.value;
    var errMsgHolder = document.getElementById("message");
    if (wachtwoord.length < 3 || wachtwoord.length >30) {
        errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
        setTimeout(function () {document.getElementById("message").innerHTML =''; }, 5000);
        return false;
    }
}

检查2个密码是否匹配:

function checkPasswordsMatch() {
    var x = document.registerForm;
    var wachtwoord = x.wachtwoord.value;
    var herhaal_wachtwoord = x.herhaal_wachtwoord.value;
    var errMsgHolder = document.getElementById("message");
    if (wachtwoord !== herhaal_wachtwoord) {
        errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
            return false;
    }
}

检查用户名是否已经存在(通过php调用ajax到数据库):

function checkBestaandeGebruikersnaam(){
var x = document.registerForm;
var gebruikersnaam = x.gebruikersnaam.value;
var errMsgHolder = document.getElementById("message");
var request = new XMLHttpRequest();

request.onreadystatechange = function() {
  if(request.readyState === 4 && request.status === 200) { 
      if(request.responseText == "1") {
            errMsgHolder.innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
      return false;
      }
      else {
          errMsgHolder.innerHTML = '';
      }
    } else {
      errMsgHolder.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
    } 
  }
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("gebruikersnaam="+gebruikersnaam);  
}

但是这些功能只显示警告,并且不会阻止用户提交包含不正确数据的表单。所以我想在用户提交时重新访问这些功能。为此,我在HTML注册表中有以下行:

<form action="register.php" onsubmit="return validate()" name="registerForm" method="post" class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0">

然后在JS中我有以下功能:

function validate() {
var errMsgHolder = document.getElementById("message");
if(checkPassword() === false ) {
    errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
            return false;
} else if(checkPasswordsMatch() === false){
    errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
            return false;
} else if(checkBestaandeGebruikersnaam() === false){
    errMsgHolder.innerHTML = 
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
            return false;
}

当我对此进行测试时,它适用于checkPassword()checkPasswordsMatch()。意思是我得到了预期的BS警报,并取消了表单的提交。但是当我测试checkBestaandeGebruikersnaam()它没有。它简要显示了BS警报,但随后它继续到我的register.php文件。因此,出于某种原因,它无视onsubmit中返回的'false'并提交。

我无法理解它。为什么它以不同的方式做这个。任何人都可以对这个问题有所了解吗?

编辑:我已经关注了这个链接,并且花了一整天的时间来尝试掌握回调函数的概念。我想我现在有,但我的问题没有解决。所以我仍然必须做错事。

由于问题显然是我从函数checkBestaandeGebruikersnaam()返回false的方式,我只会列出对该函数的更改。我现在有以下代码:

HTML:

onchange="callAjax(checkBestaandeGebruikersnaam)"

JavaScript主要功能:

function callAjax(callback){
var gebruikersnaam = document.registerForm.gebruikersnaam.value;
var request = new XMLHttpRequest();

request.onreadystatechange = function() {
  if(request.readyState === 4 && request.status === 200) { 
        callback(request.responseText);
    } else {
        document.getElementById("message").innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
    } 
  }
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("gebruikersnaam="+gebruikersnaam); 
}

JavaScript回调函数:

function checkBestaandeGebruikersnaam(result) {
if(result == "1") {
    document.getElementById("message").innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
    return false;
}
else {
    document.getElementById("message").innerHTML = '';
}
}

有人可以告诉我我是否正确使用回调功能吗?它确实按预期执行(在onchange事件上)。

validate()函数仍不适用于checkBestaandeGebruikersnaam()。即使checkBestaandeGebruikersnaam() === false,它仍会执行。我现在做错了什么?请赐教,感谢您的时间。

2 个答案:

答案 0 :(得分:1)

checkBestaandeGebruikersnaam永远不会返回falseonreadystatechange回调函数可以,但是异步执行。所以checkBestaandeGebruikersnaam立即执行并返回(未定义的值),并且您似乎期待的return false;稍后发生并被忽略。 Matteo提出了一个链接,用于从异步调用中返回响应,您应该检查它,它正在解决您的问题。在现代JavaScript中,我建议使用Promise链来处理它。

解决此问题的另一种方法是在所需条件通过时从javascript明确提交表单 - 例如从onreadystatechange方法中,您不必担心异步状态控制。表单元素有一个submit方法,您可以调用它。

答案 1 :(得分:0)

我认为你需要删除表单的onsubmit属性,而是使用 提交按钮的onclick属性:

  

onclick =“return validate();”

这样可行。 谢谢!