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

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

これら 2 つのタグを入力<span>の近くにそれぞれ追加して、クライアント側のエラーをこれら 2 つのタグに表示できるようにする必要があります。UsernamePasswordspans

次に、サーバー側で送信されたフォームを確認すると

<?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 に答える