Я хочу запретить отправку формы, когда электронная почта или имя пользователя недоступны (не найдены в базе данных) или когда пароли не совпадают. (Пароль и «подтвердить пароль» не совпадают).
Аналогичный вопрос задается здесь: JavaScript код, чтобы остановить отправку формы
Предложение было используйте функцию, которая возвращает логическое значение, и используйте ее, чтобы определить, должна ли форма быть отправлена или нет.
Я пытался сделать что-то похожее, используя usimg ajax, но я не смог вернуть значение из Ajax в функции.
Вот код PHP, который помогает при проверке электронной почты или имя пользователя существует .:
if (isset($_POST['username_check'])) {
$username = $_POST['username'];
$stmt = $db->prepare("SELECT count(*) as cntUser FROM Users WHERE username = :username");
$stmt->bindValue(':username', $username, PDO::PARAM_STR);
$stmt->execute();
$count = $stmt->fetchColumn();
if($count > 0){
echo "taken";
} else {
echo 'not_taken';
}
exit();
}
if (isset($_POST['email_check'])) {
$email = $_POST['email'];
$stmt = $db->prepare("SELECT count(*) as cntUser FROM Users WHERE email = :email");
$stmt->bindValue(':email', $email, PDO::PARAM_STR);
$stmt->execute();
$count = $stmt->fetchColumn();
if($count > 0) {
echo "taken";
} else {
echo 'not_taken';
}
exit();
}
Вот код HTML с некоторыми javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register User</title>
</head>
<script>
// This code prints red or blue text on whether passwords match or not and return a boolean value
var check = function() {
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("password2").value;
if (pass1 != "" && pass2 != "") {
if (pass1 === pass2) {
document.getElementById('message').style.color = 'green';
document.getElementById('message').innerHTML = 'matching';
return true;
} else {
document.getElementById('message').style.color = 'red';
document.getElementById('message').innerHTML = 'not matching';
return false;
}
}
else document.getElementById('message').innerHTML = '';
return false;
}
//If both passwords don't match, it should be impossible to submit form
function validate(){
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("password2").value;
return check();
}
</script>
<body>
<h1>Register user</h1>
<form method="post" id="register_form" onsubmit="return validate();">
<label>Username:</label>
<div id="error_msg"></div>
<div>
<br><input type="text" name="username" value="" placeholder="User name" maxlength=30 required id="username" />
<span></span>
</div>
<div>
<br><label>First Name:</label>
<br><input type="text" name="firstname" value="" placeholder="First name" maxlength=45 required id="firstname" />
<br><label>Last name:</label>
<br><input type="text" name="lastname" value="" placeholder="Last name" maxlength=45 required id="lastname" />
<div>
<br><label>Epost:</label>
<br><input type="email" name="email" value="" placeholder="Email" maxlength=45 required id="email" />
<span></span>
</div>
<div>
<br><label>Password: </label>
<br><input type="password" name="password" required id="password" placeholder="Password" maxlength=60 value="" onkeyup='check();'>
<br><label>Confirm password:</label>
<br><input type="password" name="password2" required id="password2" placeholder="Confirm Password" maxlength=60 value="" onkeyup='check();'/>
<span></span><span id='message'></span>
<input type="hidden" value="{{ getMac("Register") }}" name="XSRFPreventionToken">
<br><input type="submit" name="register" id="reg_btn" value="Register"></form>
<script src="../jquery-3.5.0.js"></script>
<script src="../script.js"></script>
</body>
</html>
Вот код JavaScript в скрипте. js:
$('document').ready(function(){
var result = false;
var username_state = false;
var email_state = false;
var password_state = false;
$('#username').on('blur', function(){
var username = $('#username').val();
if (username == '') {
username_state = false;
return;
}
$.ajax({
url: 'process.php',
type: 'post',
data: {
'username_check' : 1,
'username' : username,
},
success: function(response){
if (response == 'taken' ) {
username_state = false;
$('#username').parent().removeClass();
$('#username').parent().addClass("form_error");
$('#username').siblings("span").text('Sorry... Username already taken');
}else if (response == 'not_taken') {
username_state = true;
$('#username').parent().removeClass();
$('#username').parent().addClass("form_success");
$('#username').siblings("span").text('Username available');
}
}
});
});
$('#email').on('blur', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
return;
}
$.ajax({
url: 'process.php',
type: 'post',
data: {
'email_check' : 1,
'email' : email,
},
success: function(response){
if (response == 'taken' ) {
email_state = false;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_error");
$('#email').siblings("span").text('Sorry... Email already taken');
}else if (response == 'not_taken') {
email_state = true;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_success");
$('#email').siblings("span").text('Email available');
}
}
});
});
//Check if everything is OK and submit form
$('#reg_btn').on('click', function(){
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
if (username_state == false || email_state == false) {
$('#error_msg').text('Fix the errors in the form first');
$("#register_form").submit(function(e){
e.preventDefault();
});
} else $("#register_form").submit(function(e){
e.submit();
});
});
});
Я могу запретить вход, если пароли не совпадают. И я получаю сообщения, когда электронная почта или имя пользователя недоступны. Но я не мог предотвратить отправку формы, когда электронная почта или имя пользователя недоступны. (Когда вы отправляете его, просто выдаете сообщение об ошибке, так как у меня в таблицах базы данных есть «PK» и «уникальные ключи», что предотвращает дублирование адресов электронной почты и имени пользователя).
Как предотвратить отправку формы, если (username_state == false || email_state == false)?