如何使用Ajax在頁面上顯示PHP服務器端驗證消息

Question

我是Bootstrap和Ajax的新手。 我有2個查詢，我在下面提到過。 請幫助解決這些問題。

1）如果我沒有在登錄ID文本框中輸入任何信息，那么它顯示我js錯誤。 但是當我輸入無效的登錄ID並提交表單時，它不會在PHP進程頁面（p_reg_p.php）上顯示服務器端錯誤消息。

那么我需要在Ajax代碼中進行哪些更改才能在表單頁面上顯示服務器端驗證消息（register.php）

注意：我已從注冊頁面中刪除了所有其他字段，以便於閱讀和縮短。 提交表單並將數據插入數據庫表中沒有任何問題，因此功能對我來說很好。

2）我將在同一頁面上注冊和登錄表格。 那么我需要在register.php和register.js頁面上考慮哪些事情，這樣兩種形式都可以正常工作而不受任何干擾。

輸入表格頁面（register.php）

<script src="./register.js"></script>

<div class="row">
    <div class="col-md-12">
        <h3>Register</h3>
        <form name="sentMessage" id="FormPRegister" novalidate>
            <div class="control-group form-group">
                <div class="controls">
                    <label>Login ID:</label>
                    <input type="text" class="form-control" id="r_loginid" required data-validation-required-message="Please enter login id.">
                    <p class="help-block"></p>
                </div>
            </div>
            <div id="success"></div>
            <!-- For success/fail messages -->
            <button type="submit" class="btn btn-primary">Send Message</button>
            <br/><br/>
        </form>
    </div>
</div>

Ajax驗證頁面（register.js）

$(function() {

    $("#FormPRegister input,#FormPRegister textarea ,#FormPRegister select").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // something to have when submit produces an error ?
        // Not decided if I need it yet
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var r_loginid = $("input#r_loginid").val();

        $.ajax({
            url: "./user/p_reg_p.php",
            type: "POST",
            data: {
                r_loginid: r_loginid,
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Success Message will come here.</strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#FormPRegister').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + " Error Message will come here!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#FormPRegister').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});


/*When clicking on Full hide fail/success boxes */
$('#r_name').focus(function() {
    $('#success').html('');
});

進程頁面（p_reg_p.php）

if( IsvalidLoginID($_POST["r_loginid"]) )
{
    echo "Invalid Login ID! Use only Alpha-Numerics!";
    return false;
}

Answer 1

在你的HTML中，改變

 <input type="text" class="form-control" id="r_loginid" required data-validation-required-message="Please enter login id.">

至

 <input type="text" class="form-control" id="r_loginid" name="r_loginid" required data-validation-required-message="Please enter login id.">

$ _POST vars不從輸入標簽中讀取“id”...它們讀取“name”。

最好包括兩者。