Php AJAX表单验证错误_Php_Jquery_Ajax

Php AJAX表单验证错误

php jquery ajax

Php AJAX表单验证错误,php,jquery,ajax,Php,Jquery,Ajax,我正在开发一个简单的登录表单，但其中包含高级功能。在提交表单时，我希望使用AJAX对其进行验证，并在相应的SPAN class=error中显示错误消息。问题是我提交表单时没有收到验证错误。下面是我尝试过的代码。请帮忙 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="_images/Favicon.png"/> &l

我正在开发一个简单的登录表单，但其中包含高级功能。在提交表单时，我希望使用AJAX对其进行验证，并在相应的SPAN class=error中显示错误消息。问题是我提交表单时没有收到验证错误。下面是我尝试过的代码。请帮忙

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="_images/Favicon.png"/>
<title>18+</title>
<link href="_css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_scripts/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#username').focus(); Focus to the username field on body loads
$('#submit').click(function(){ // Create `click` event function for login
    var username = $('#username'); // Get the username field
    var password = $('#password'); // Get the password field
    var login_result = $('.login_result'); // Get the login result div
    var username = $('.username'); // Get the username error div
    var password = $('.password'); // Get the password error div

    if(username.val() == ''){ // Check the username values is empty or not
        username.focus(); // focus to the filed
        username.html('<span class="error">Enter the Username...</span>');
        return false;
    }

    if(password.val() == ''){ // Check the password values is empty or not
        password.focus();
        password.html('<span class="error">Enter Your Password...</span>');
        return false;
    }

    if(username.val() != '' && password.val() != ''){ 
        var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
        $.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
        type : 'POST',
        data : UrlToPass,
        url  : 'checker.php',
        success: function(responseText){ // Get the result and asign to each cases
            if(responseText == 0){
                login_result.html('<span class="error">The Username Or Password You Entered Is Incorrect...</span>');
            }
            else if(responseText == 1){
                window.location = 'admin.php';
            }
            else{
                alert('Problem with sql query');
            }
        }
        });
    }
    return false;
  });
});
</script>

</head>
<body>
<div id="logo"></div>
<div id="container">
<div id="form">
<form action="" method="post" id="user_login" name="user_login" enctype="multipart/form-data">
<p id="head">User Login</p>
<div class="row">
<span class="error" class="login_result" id="login_result"></span>
</div>

<div class="row">
<div class="input">
<input type="text" id="username" name="username" class="detail" placeholder="Username" spellcheck="false" title="Enter Your Username.."/>
<span class="error" id="username">Enter Your Username....</span>
</div>
</div>

<div class="row">
<div class="input">
<input type="password" id="password" name="password" class="detail" placeholder="Password" spellcheck="false" title="Enter Your Password.."/>   
<span class="error" id="password">Enter Your Password...</span>
</div>
</div>

<p class="submit">
<button type="submit" id="submit" name="submmit" value="Register">Login</button>
</p>
</form> 
</div>
</div>
</div>
</div><!--end container-->
<div id="formfooter">
<div class="input">
Copyright &copy; CompanyName.
</div>
</div>
</body>
</html>

在javascript中捕获事件时，应防止默认操作：

....
$('#submit').click(function(e){ // Create `click` event function for login
    e.preventDefault(); //Prevent the default submit action of the form
    var username = $('#username'); // Get the username field
    var password = $('#password'); // Get the password field
    var login_result = $('.login_result'); // Get the login result div
....

首先，在HTML表单上有两个相同的ID

<input type="text" id="username" .../>
<span class="error" id="username">....

用户名和密码已被使用。将其更改为不同的变量名

第三，我建议您使用这个很棒的jquery表单验证库

祝你好运：

$“用户名”。专注；关注body loads上的username字段这需要在focust之前添加注释//非常感谢您的建议。但问题仍然存在，我提交空表单时没有收到任何验证错误。。

<span class="error" class="username">....

var username = $('#username'); 
var password = $('#password');
.....
var username = $('.username'); 
var password = $('.password');