bootstrapValidator not able to submit ajax form with a success message

Question

I m trying to submit form with ajax using jquery and validating it with bootstrapValidator. the submission of form works when i dont validate it but i dont get a success message . when i use bootsrapvalidator form submits but it goes to the insertion page . (ajax dont work) I used priventdefault(); to stop it but then the form submission stoped. in both cases i m not able to get the success or failure message.

what i want to do

Sucess message on successfull submition and error message on error

submition through Ajax jquery

validation using bootstrap validation clear the form after submission

please look at the code and tell me where i am doing it wrong

after edit

I am also posting my form here please look at the form to

<p id="message_show">hiii</p>
<form class="form-horizontal" id="achievements-form" method="post" action="/InsertAchievements">
    <fieldset>


        <!-- Form Name -->
        <legend>Achievements</legend>

        <div class="form-container box">

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-2 control-label" for="title">Title</label>
                <div class="col-md-7">
                    <input id="title" name="title" type="text" placeholder="title"
                           class="form-control input-md" required>
                </div>
            </div>



            <div class="form-group">
                <label class="col-md-2 control-label" for="example1">Date</label>

                <div class="col-md-7">
                    <input type="date" placeholder="date" name="date" id="example1" required class="form-control">

                </div>

            </div>


            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-2 control-label" for="textinput">Content</label>
                <div class="col-md-7">
                    <textarea id="textinput" name="content" type="text" placeholder="Content"
                              class="form-control input-md" rows="7" required></textarea>

                </div>
            </div>



            <!-- Button (Double) -->
            <div class="form-group">
                <label class="col-md-2 control-label" for="update"></label>
                <div class="col-md-8">
                    <button id="update" name="update" type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </div>
    </fieldset>
</form>

<script>
   $.noConflict();
    console.log("achivements validation");
    $("#update").click(function (event) {
        event.preventDefault();
        console.log("update button clicked");


        var validator = $("#achievements-form").bootstrapValidator({
            live: 'enabled',
            message: 'This value is not valid',
            submitButton: '$achievements-form button[type="submit]',
            submitHandler: function (validatior, form, submitButton) {
                $.ajax({

                    url: "/InsertAchievements",
                    method: "post",
                    data: $('#achievements-form').serialize(),
                    dataType: "String",

                    success: function (data) {
                        $('#message_show').text("success");
                        $("#email-form").data('bootstrapValidator').resetForm();

                        $("#achievements-form")[0].reset();
                    }

                });
                return false;
            },

            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: 'Title is required'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'Must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
                            message: 'The title can only consist of alphabetical number and spaces'
                        }
                    }
                },
                date: {
                    validators: {
                        notEmpty: {
                            message: 'Date is required'
                        }
                    }
                },
                content: {
                    validators: {
                        notEmpty: {
                            message: 'Content is required'
                        },
                        stringLength: {
                            min: 1,
                            max: 500,
                            message: 'Must be more than 1 and less than 500 characters long'
                        },
                        regexp: {
                            regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
                            message: 'The title can only consist of alphabetical number and spaces'
                        }
                    }
                }
            }

        });

    });
});

Answer 1

The to do list is upside down, you need to correct the steps

1. Validation using bootstrap validation

2. Submission through Ajax jQuery via submit handler

3. Success message on successful submission, clear the form and if error, show message on error

Remove click function you don't need it at all and let the bootstrapvalidator do it for you and submit the form with submitHandler via Ajax method.

<script>
$(document).ready(function () {
$("#achievements-form").bootstrapValidator({
    live: 'enabled',
    message: 'This value is not valid',
    submitButton: '$achievements-form button[type="submit]',
    submitHandler: function (validatior, form, submitButton) {
        $.ajax({
            url: "/InsertAchievements",
            method: "post",
            data: $('#achievements-form').serialize(),
            dataType: "String",
            success: function (data) {
                $('#message_show').text("success");
                $("#email-form").data('bootstrapValidator').resetForm();
                $("#achievements-form")[0].reset();
          }
      });
      return false;
    },
    fields: {
        title: {
            validators: {
                notEmpty: {
                    message: 'Title is required'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'Must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
                    message: 'The title can only consist of alphabetical number and spaces'
                }
            }
        },
        date: {
            validators: {
                notEmpty: {
                    message: 'Date is required'
                }
            }
        },
        content: {
            validators: {
                notEmpty: {
                    message: 'Content is required'
                },
                stringLength: {
                    min: 1,
                    max: 500,
                    message: 'Must be more than 1 and less than 500 characters long'
                },
                regexp: {
                    regexp: /^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$/,
                    message: 'The title can only consist of alphabetical number and spaces'
                }
            }
        }
    }
});
});
</script>