Question

我正在开发一个简单的登录表单，但具有高级功能。在提交表单时，我想用AJAX验证它并在相应的“SPAN class =”错误中显示错误消息“。问题是我在提交表单时没有收到验证错误。以下是代码我我试过了。请帮帮忙..

<!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>

Answer 1

当您在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
....

Answer 2

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

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

看看上面你可以看到有两个id用户名。您应该使用class属性更改id属性，使其成为

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

其次，在你的javascript上你有相同的变量分配。

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

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

第三，我建议你使用这个很棒的jquery表单验证库http://jqueryvalidation.org/

祝你好运:)

AJAX表单验证错误

2 个答案: