0

我有一个表格可以登录

    <div class="fade_bg">
        <div class="actionDiv">
            <form id="login_form" action="./classes/login/Authenticator.php" method="post">
                <p>username: <input type="text" name="username" /></p>
                <p>password: <input type="password" name="password" /></p>
                <p>
                    <input type="submit" name="adminLogin" value="Log in" id="adminLogin" />
                    <input type="submit" name="cancelLogin" value="Cancel" id="cancelLogin" />      
                </p>
            </form>
        </div>
    </div>

请注意表单操作是“./classes/login/Authenticator.php”。PHP 脚本本身没有 HTML 或任何东西。

我想要的是在里面显示一条错误消息

   <div class="actionDiv">

如果用户输入了空表单或错误的凭据。我试过使用 AJAX，但没有用。

登录本身有效。我只需要打印错误。

这是我使用的 AJAX：

            $('#adminLogin').on('click', function() {
                $.ajax ({
                    type: 'post',
                    url: './classes/login/Authenticator.php',
                    dataType: 'text',
                    data: $('#login_form').serialize(),
                    cache: false,
                    success: function(data) {
                        if(data == 'invalid credentials')
                            $('body').html(data);
                        else
                            $('.fade_bg').fadeOut(200);
                    },
                    error: function(msg) {
                        alert('Invalid username or password');
                    }
                });
            });
4

3 回答 3

1

表单可能正在由浏览器提交。您可以阻止默认操作。

$('#login_form').submit(function(e){
    e.preventDefault(); 
    //perform ajax request here. 
});
于 2013-05-10T17:21:30.757 回答
0

阻止提交按钮提交表单：

$('#adminLogin').on('click', function(event) {
  event.preventDefault();    
  ...

如果您想在 中显示返回消息.actionDiv，请在您的 ajax 成功回调中执行此操作：

if(data == 'invalid credentials')
  $('.actionDiv').append($('<p/>').text(data));
...
于 2013-05-10T17:21:22.077 回答
0

对于客户端验证，您需要在$.ajax调用此条件之前进行检查

您还必须给id两个输入字段

$(document).ready(function(){
    $('#adminLogin').on('click',function() {
            //alert("hello");
            var name = $("#username").val();
            var error = 0 ;
            if(name == ""){
                $("#errUsername").fadeIn().text("Username required.");
                $("#username").focus();
                error++;
            }

            var password= $("#password").val();
            if(password== ""){
                $("#errPassword").fadeIn().text("Password required.");
                $("#password").focus();
                error++;
            }
            if(error > 0)
            {
                error = 0;
                $('.actionDiv').append($('<p/>').text('invalid credentials'));
                return false;
            }

            $.ajax ({
                type: 'post',
                url: 'login.php',
                //dataType: 'text',
                data: $('#login_form').serialize(),
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == 'invalid credentials')
                    {
                        $('.actionDiv').append($('<p/>').text(data));
                        return false;
                    }
                },
                error: function(msg) {
                    alert('Invalid username or password');
                }
            });
        });
});

您需要将这两个<span>标签分别添加到Username和Password输入附近，以便可以在这两个中显示客户端错误spans

然后在服务器端当您检查提交的表单时

<?php

    $uname = isset($_POST['username']) ? $_POST['username'] : "";
    $pswd = isset($_POST['password']) ? $_POST['password'] : "";

    //perform query operation whether Username with valid password is exist or not

    if($notExist)
        echo "invalid credentials";
    else
        echo "success";
?>

当响应到来时，您$.ajax可以通知用户invalid credentialssuccess

if(data == 'invalid credentials')
  $('.actionDiv').append($('<p/>').html(data));
于 2013-05-10T17:27:00.260 回答