onsubmit返回false,但submit仍然执行
onsubmit returns false, but submit executes anyway
我又迷路了。我有一个注册表单,有三个JS函数,当onchange从我的html表单调用时,它们会产生所需的输出。因此,当用户填写表单时,它们就会产生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">×</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;
}
}
检查两个密码是否匹配:
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">×</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">×</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">×</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">×</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">×</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">×</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
。我现在做错了什么?请开导我,谢谢你抽出时间。
checkBestaandeGebruikersnaam
从不返回false
。onreadystatechange
回调函数会这样做,但它是异步执行的。因此checkBestaandeGebruikersnaam
会立即执行并返回(一个未定义的值),而您所期望的return false;
会在稍后发生并被忽略。Matteo建议使用一个链接来返回异步调用的响应,您应该检查一下,它正处于解决问题的正确轨道上。在现代JavaScript中,我建议使用Promise链来处理此问题。
解决此问题的另一种方法是,只要所需条件通过,就从javascript显式提交表单,例如从onreadystatechange
方法中提交,这样就不必担心异步状态控制。form元素有一个可以调用的submit
方法。
我认为您需要删除表单的onsubmit属性,而使用Submit按钮的onclick属性:
onclick="return validate();"
这是可行的。谢谢
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JavaScript执行暂时挂起页面
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 当js函数's已执行
- 哪个先执行
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- HTML表单提交时未执行外部函数
- 在Safari执行javascript之前对其进行修改
- Amd,希望确保某个东西总是最后执行
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- onsubmit返回false,但submit仍然执行
- 使用JavaScript onclick-submit执行PHP
- 在表单块上执行submit()
- 如果未完成event.prventDefault(),则在('submit')中未执行console.l
- 当按下Submit时,Form不会执行任何操作
- Javascript form.submit()失败并停止执行其余的Javascript代码
- 如何在jQuery submit()执行之前运行代码?
- 检测通过JavaScript执行的form.submit()
- 将表单captcha重置延迟到submit()执行之后
- 在所有form.submit()之前执行一个函数