[英]onsubmit not working with ajax mysql validation
我知道有很多類似的問題,但是我一直找不到能解決我的問題的問題。
事情是我想檢查針對mysql db的表單中的用戶名/密碼是否存在,我通過在表單的onsubmit屬性中調用javascript函數來實現此目的,該函數通過AJAX將輸入發布到php中,以檢查輸入並回顯結果到javascript函數,該函數會提醒用戶並返回false或true,以便表單提交。
的HTML
<span id="error_message" style="color:#CC3300;font-size:15px" ></span><br/>
<form method="post" action="./includes/process_login.php" onsubmit="return validateForm()" name="login_form">
<div>
<label for="email">Email</label><br/>
<input placeholder="Introduce tu email" type="text" id="email" name="email" maxlength="50" />
</div>
<div>
<label for="password">Password</label><br/>
<input placeholder="Introduce tu password" type="password" name="password" id="password" maxlength="16" />
</div>
<div>
<a class="passwordReset" href="./admin/passwordRecovery.php">He olvidado mi contraseña...</a>
</div>
<input type="submit" id="submit_button" value="ENTRAR" />
</form>
JAVASCRIPT / AJAX
function validateForm() {
var pattern = new RegExp(/* Email validation pattern */);
var isValid;
if (pattern.test($("#email").val())) {
$.ajax({
url: "../includes/process_login.php",
cache: false,
type: "POST",
data: "email=" + $("#email").val() + "&password=" + $("#password").val(),
success: function(data){
if (data == '1') {
isValid = true;
} else {
$("#error_message").text('Email/Password incorrectos!CCC');
isValid = false;
}
},
error: function(){
$("#error_message").text('Email/Password incorrectos!');
isValid = false;
}
});
} else {
$("#error_message").text('El email debe tener un formato válido');
isValid = false;
}
return isValid;
}
PHP同時進行驗證和表單操作:
<?php
include_once 'db_connect.php';
include_once 'functions.php';
sec_session_start();
if (isset($_POST['email'], $_POST['password'])) {
$email = $_POST['email'];
$password = $_POST['password'];
if (login($email, $password, $mysqli) == true) {
// Login success
header("Location: ../graficas.php");
echo '1';
} else {
// Login failed
echo '0';
}
} else {
// The correct POST variables were not sent to this page.
echo '0';
}
exit;
當電子郵件輸入強制輸入到電子郵件正則表達式時,始終提交該表單,因此問題必須在ajax函數內部。 但是我不知道這是什么,幾個小時后,我比以往任何時候都更接近庇護。
提前致謝!
在您的validateForm()
內部添加此內容以防止表單提交
e.preventDefault();
像這樣
function validateForm(e){
var pattern = new RegExp(/* Email validation pattern */);
var isValid;
if (pattern.test($("#email").val())) {
e.preventDefault();
//Do rest of your code
通過將表單和所有邏輯都放在一個PHP文件中,我終於可以完成它:
<!-- The HTML login form -->
<form method="post" action="<?=$_SERVER['PHP_SELF']?>">
<div>
<label for="username">Login</label><br/>
<input placeholder="Introduce tu login" type="text" id="user" name="username" maxlength="50" />
</div>
<div>
<label for="password">Password</label><br/>
<input placeholder="Introduce tu password" type="password" name="password" id="password" maxlength="16" />
</div>
<div><a class="passwordReset" href="./admin/passwordRecovery.php">He olvidado mi contraseña...</a></div>
<input type="submit" id="submit_button" name="submit" value="ENTRAR" />
</form>
<?php
if (isset($_POST['submit'])){
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$username = $_POST['username'];
$password = $_POST['password'];
if (login($username, $password, $mysqli) == true) {
// Login success
echo '<script type="text/javascript">window.location.replace("graficas.php");</script>';
} else {
// Login failed
echo '<script type="text/javascript">document.getElementById(\'error_message\').innerHTML = "Login/Password incorrectos!";</script>';
}
}
?>
需要修改元素並避免AJAX問題時,可通過“ echo”生成JS腳本。
這里的關鍵要素是
isset($_POST['submit'])
檢查表單是否之前已提交。
我從這個不錯的教程中得到了這個主意: http : //w3epic.com/php-mysql-login-system-a-super-simple-tutorial/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.