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

I am completely new to Bootstrap and Ajax. I have 2 queries that I have mentioned below. Please help to resolve these queries.

1) If I don't enter any info in login ID textbox then it is showing me js error. But when I enter invalid login ID and submit form, it doesn't show server side error message on PHP process page(p_reg_p.php).

So what changes I need to do in Ajax code to display server side validation message on form page (register.php)

NOTE: I have removed all other fields from register page to make it easier to read and shorter. Also form is submitted and data are inserted into database table without any issue so functionality is working fine for me.

2) I will have register & login forms on same page. So what things I need to consider on register.php and register.js pages so both form works properly without any interference.

INPUT FORM PAGE (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 Validation Page (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('');
});

process page (p_reg_p.php)

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

In your html, change

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

To

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

$_POST vars don't read "id" from input tags...they read "name".

It's always best to include both.