How to BootstrapValidator after submit form using Ajax in PHP

jQuerys serialize() method to get the form data, and then ajax() methods to send the data to the back-end endpoint. After clicking the submit button, FormValidation will submit the form if all the fields are valid. If you want to do additional tasks instead of submitting the form, you can trigger the success.form.fv event. We always need to add validation on form like registration form, contact form, login form etc. we always prefer to give validation error after page refresh but you can give validation without page refresh. If you use bootstrap then you can use easily bootstrapValidator.js plugin.

Steps For How to BootstrapValidator after submit form using Ajax in PHP

Step 1. bootstrapValidator.js plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

Step 2. HTML Code

<form method="POST" id="registerstudent" action="registration_process_teacherstostudent.php">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label >First Name</label>
            <input type="text" class="form-control clartestvaluestudent" name="fname" id="fname" placeholder="First Name"  required>
        </div>
        <div class="form-group col-md-6">
            <label >Last Name</label>
            <input type="text" class="form-control clartestvaluestudent" name="lname" id="lname" placeholder="Last Name"  required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label >Email Address</label>
            <input type="email" class="form-control clartestvaluestudent" name="email" id="email" placeholder="Email Address" required>
        </div>
        <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control clartestvaluestudent" name="password" id="password" placeholder="Password" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label >Class</label>
            <select name="className" class="form-control clartestvaluestudent" style="height: 35px;">
                <option value="" name="classA">Please select class</option>
                <option value="A" name="className">A</option>	
                <option value="B" name="className">B</option>	
                <option value="C" name="className">C</option>	
                <option value="D" name="className">D</option>		
            </select>
        </div>
        <div class="form-group col-md-6">

        </div>
    </div>
    <div class="form-group col-md-12">
        <div style="clear: both"></div>
        <input type="hidden" name="student" value="student">
        <input type="submit" style="width: auto;" class="btn btn-primary form-control Studentbuttondisbled" value="Register" name="register" id="register">
    </div>
    <div style="clear: both"></div>
</form>

Step 3. jQuery bootstrapValidator Code

$('#registerstudent').bootstrapValidator({
        message: 'This value is not valid',
        fields: {
            fname: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your First name.'
                    },
                    stringLength: {
                        min: 2,
                        max: 20,
                        message: 'First name must be 2 to 20 characters.'
                    },
                    regexp: {
                         regexp: /^[a-z\s]+$/i,
                         message: 'The First name can consist of alphabetical characters and spaces only'
                     }
                }
            },

            lname: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your Last name.'
                    },
                    stringLength: {
                        min: 2,
                        max: 20,
                        message: 'Last name must be 2 to 20 characters.'
                    },
                    regexp: {
                         regexp: /^[a-z\s]+$/i,
                         message: 'The Last name can consist of alphabetical characters and spaces only'
                     }
                }
            },

            email: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your Email.'
                    },
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your Password.'
                    },
                    stringLength: {
                        min: 4,
                        message: 'Password has to be at least 4 char.'
                    },
                }
            },
     }
}).on('success.form.bv', function(e) {
        e.preventDefault();
        var $form = $(e.target);
        var bv = $form.data('bootstrapValidator');
        $.post($form.attr('action'), $form.serialize(), function(result) {
            $('#loaderbg').hide();
             $('.clartestvaluestudent').val('');
             $(".Studentbuttondisbled").prop('disabled', false);
            if(result.message)
            {
               alert(result.message);
               location.reload();
            }
            else if(result.error)
            {
               alert(result.message);
               location.reload();
            }
        }, 'json');
});

Step 4. PHP Code

In this step ajax call in registration_process_teacherstostudent.php file.

<?php
    session_start();
    include "../function.php";
    $insert_sql_student = "INSERT INTO student (fname, lname, email,password, class_ID) VALUES ('".$_POST['fname']."','".$_POST['lname']."','".$_POST['email']."','".$_POST['password']."', ".$_POST['className'].");";
    $conn = dbConnect();
    $stmt2 = $conn->prepare($insert_sql_student);
    $stmt2->execute();


    if($stmt && $stmt1 && $stmt2->rowcount() == 0) 
    {
        $json['error'] = "Wrong inserted";
    } 
    else 
    {
        $json['message'] = "New student has been inserted";
    }
    echo json_encode($json)
?>