如何使用 Ajax 在页面上显示 PHP 服务器端验证消息

Question

我对 Bootstrap 和 Ajax 完全陌生。我有两个我在下面提到的查询。请帮助解决这些问题。

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 变量不会从输入标签中读取“id”……它们会读取“name”。

最好同时包含两者。