3

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

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Ty for your reply. I did what you suggested but no luck yet. Will p_reg_p.php send validation error message to Ajax and then Ajax to register.php? Can you clarify this.
The first part is correct, but I wouldn't say that it sends it from Ajax to register.php since register.js is called by register.php. What I would check is whether or not the function "IsvalidLoginID" that's in p_reg_p.php is indeed returning "true". To do so, add an else statement that echo's out a different value and see if it that error message is displayed instead.
function "IsvalidLoginID" returns true if login ID entered correctly so it is working fine.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.