Question

我尝试使用jquery使用ajax提交表单并使用bootstrapValidator进行验证。当我不验证它但我没有得到成功消息时，提交表单有效。当我使用bootsrapvalidator表单提交但它进入插入页面。（ajax不工作）我使用priventdefault（）;停止它然后表单提交停止。在这两种情况下，我都无法获得成功或失败的信息。

我想做什么

有关成功提交的成功消息和错误消息

通过Ajax jquery

提交

使用bootstrap验证进行验证提交后清除表格

请查看代码并告诉我我在哪里做错了

编辑后

我也在这里发表我的表格，请查看表格

<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

待办事项列表是颠倒的，您需要更正步骤

使用bootstrap验证进行验证
通过submit handler
成功提交成功消息，清除表单，如果错误，则显示错误消息

删除您根本不需要的click函数，让bootstrapvalidator为您执行此操作，并通过Ajax方法使用submitHandler提交表单。

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

bootstrapValidator无法使用成功消息提交ajax表单

1 个答案: