Question

我有一个要登录的表单

    <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');
                    }
                });
            });

Answer 1

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

$('#login_form').submit(function(e){
    e.preventDefault(); 
    //perform ajax request here. 
});

Answer 2

阻止提交按钮提交表单：

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

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

if(data == 'invalid credentials')
  $('.actionDiv').append($('<p/>').text(data));
...

Answer 3

对于客户端验证，您需要在$.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 credentials中的success

if(data == 'invalid credentials')
  $('.actionDiv').append($('<p/>').html(data));

使用类时在同一页面上显示登录错误（php）

3 个答案: