onsubmit возвращает false, но submit выполняет в любом случае

Question

Я снова потерялся. У меня есть форма регистрации с тремя функциями 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">&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; 
    } 
} 

Чтобы проверить, если имя пользователя уже существует (Ajax вызов с помощью PHP в базу данных):

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() Я буду перечислять только изменения этой функции. У меня есть следующий код сейчас:

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. Что я теперь сделал не так? Пожалуйста, просветите меня и спасибо за ваше время.

Answer 1

Я думаю, вам нужно удалить onsubmit свойство формы, а вместо этого использовать Отправить OnClick собственности баттона:

OnClick = "возвращение Validate();"

Это будет работать. Спасибо!

Answer 2

checkBestaandeGebruikersnaam не возвращается false. Функция обратного вызовавыполняет, но выполняется асинхронно. Таким образом, checkBestaandeGebruikersnaam выполняет и возвращает (неопределенное значение) немедленно, а return false;, который, как вы ожидаете, произойдет через некоторое время и игнорируется. Matteo предложил ссылку для возврата ответа от асинхронного вызова, который вы должны проверить, это на правильном пути для решения вашей проблемы. В современном JavaScript я бы предложил обработать это с помощью цепочки Promise.

Другим способом решения этого вопроса было бы явно отправить форму из javascript всякий раз, когда требуемые условия проходят - например, из-за метода onreadystatechange, поэтому вам не нужно беспокоиться об асинхронном управлении состоянием. Элемент формы имеет метод submit, который вы можете вызвать.