Question

我是Bootstrap和Ajax的新手。我有2个查询，我在下面提到过。请帮助解决这些问题。

1）如果我没有在登录ID文本框中输入任何信息，那么它显示我js错误。但是当我输入无效的登录ID并提交表单时，它不会在PHP进程页面（p_reg_p.php）上显示服务器端错误消息。

那么我需要在Ajax代码中进行哪些更改才能在表单页面上显示服务器端验证消息（register.php）

注意：我已从注册页面中删除了所有其他字段，以便于阅读和缩短。同时提交表单并将数据插入到数据库表中而没有任何问题，因此功能对我来说工作正常。

2）我将注册＆amp;登录表单在同一页面上。那么我需要在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”。

最好同时包括两者。

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

1 个答案: