bootstrapValidator не может отправить форму ajax с сообщением об успехе

Question

Я пытаюсь отправить форму с помощью ajax, используя jquery, и проверяю ее с помощью bootstrapValidator. отправка формы работает, когда я не проверяю ее, но я не получаю сообщение об успехе. когда я использую отправку формы bootsrapvalidator, но она переходит на страницу вставки. (Ajax не работает) Я использовал priventdefault(); чтобы остановить это, но тогда подача формы прекратилась. в обоих случаях я не могу получить сообщение об успехе или неудаче.

Что я хочу сделать

Успешное сообщение об успешной передаче и сообщение об ошибке при ошибке

передача через Ajax JQuery

проверка с использованием начальной загрузки проверки очистить форму после отправки

пожалуйста, посмотрите на код и скажите мне, где я делаю это неправильно

после редактирования

Я также публикую свою форму здесь, пожалуйста, посмотрите на форму

<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

Список дел вверх ногами, вам нужно исправить шаги

1. Проверка с использованием начальной загрузки

2. Представление через Ajax JQuery через submit handler

3. Сообщение об успехе при успешной отправке, очистите форму и, если ошибка, показать сообщение об ошибке

Удалить click функция, которая вам вообще не нужна, и пусть bootstrapvalidator сделает это за вас и отправит форму с submitHandler с помощью метода Ajax.

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